Всем привет! Есть код: Код (Text): <input type="text" name="city_region" id="position" onkeyup="search_position(this.value)" value="<? echo $city; ?>" onblur="hide_city(); " onfocus="this.value='' " /> <div id="city_result"></div> В данном input-е вводится название города. По умолчанию в текстовом поле вписан город $city. При появлении фокуса в поле значение обнуляется. Оnkeyup анализирует ввод текста и в div с id="city_result" подгружает список ссылок с названиями городов с помощью функции search_position. Это все работает. Необходимо функцией hide_city при нажатии на ссылку текст ссылки вставлять в поле input, а при потере фокуса вне ссылки возвращать значение по умолчанию $city. Буду благодарен за помощь.
А если я что-то ввел в поле, потом перевел фокус, потом вернулся назад? Привет, пустая строка? По какой ссылке? По любой на странице?
rodent90 не ну спасибо конечно, но во первых хотелось бы корректности отображения во всех (основных) браузерах, во вторых при написании в поле текста и не выборе появляющейся ссылки (то есть потере фокуса вне предложенных ссылок), в поле останется набранный текст, а по условиям задачи в поле должен быть либо текст по умолчанию, либо текст ссылки. Как плэйсхолдер решает эту задачу, чувак? Fell-x27 1) Если вы ввели в поле текст, появится список ссылок с названиями городов. Если вы выбрали одну из ссылок, то текст ссылки должен вставиться в поле. Если фокус потерян и ссылка не выбрана, то должно появиться значение по умолчанию. Если ранее в поле был текст (либо по умолчанию, либо ранее выбранная ссылка), и в поле появляется фокус, то текст должен пропасть. Если фокус был потерян, то должен появиться ранее введенный текст. 2) Не по любой, а именно по ссылке из предложенного списка. Например вы вводите "Но" появляется список ссылок городов "Норильск" "Ноябрьск" и т.д.
Вот, после уточнения оказалось, что автор пишет автокомплит, а не просто инпут с костылями вместо плейсхолдеров. Добавлено спустя 54 секунды: Автор, запости на JSFiddle работающий экземпляр странички, по фен-шую. Мб поковыряю на досуге. То бишь завтра вечерком. Мне сейчас много практики на JS нужно как раз. А такие вещи куда полезнее скучных синтетических задачек, от которых подташнивает уже.
JSFiddle пробовал лишь однажды. Даже не знаю как в этой песочнице ПХП использовать (уж прошу прощения за невежество). По этому выложу свой код здесь. Код из основной страницы: Код (Text): function search_position(word) { if ($('#position').val()!='') { $.post( 'search_position.php', {word: word}, onSuccess); function onSuccess(data) { $('#city_result').html(data); var myD = document.getElementById('city_result'); myD.style.display = 'block'; } } else $('#city_result').html(''); } function hide_city() { //здесь надо что-то придумать //и желательно перенести впоследствии весь код из onblur инпута } function close_div() { document.getElementById('city_result').style.display = 'none'; } <div id="search_position"> <input type="text" name="city_region" id="position" onkeyup="search_position(this.value)" value="<? echo $city.", ".$rayon.", ".$region; ?>" onblur="if (this.value=='') this.value='<? echo $city.", ".$rayon.", ".$region; ?>'; hide_city(); " onfocus="this.value=''; close_div();" /> <div id="city_result"></div> </div> Код страницы search_position.php, запрашиваемой аяксом: Код (Text): <?php $fh = fopen('http://geocode-maps.yandex.ru/1.x/?geocode='.$_POST['word'],'r'); if($fh) { while(!feof($fh)) $text.=fread($fh,4096); fclose($fh); } else echo "'error'"; $l = simplexml_load_string($text); foreach ($l->GeoObjectCollection->featureMember as $key => $value) { if ($value->GeoObject->metaDataProperty->GeocoderMetaData->AddressDetails->Country->CountryNameCode=="RU" && $value->GeoObject->metaDataProperty->GeocoderMetaData->AddressDetails->Country->AdministrativeArea->SubAdministrativeArea->Locality->LocalityName) echo '<a href=\'javascript:;\' onclick=hide_city()><p onclick="$(\'#position\').val($(this).html()); document.getElementById(\'city_result\').style.display = \'none\';">'. $value->GeoObject->metaDataProperty->GeocoderMetaData->AddressDetails->Country->AdministrativeArea->SubAdministrativeArea->Locality->LocalityName .', '. $value->GeoObject->metaDataProperty->GeocoderMetaData->AddressDetails->Country->AdministrativeArea->SubAdministrativeArea->SubAdministrativeAreaName .', '. $value->GeoObject->metaDataProperty->GeocoderMetaData->AddressDetails->Country->AdministrativeArea->AdministrativeAreaName .'</p></a>'; } ?> Была мысль при вызове функции hide_city() передавать в нее переменную с текстом выбранной ссылки. В этом случае при потере фокуса в инпуте функция hide_city должна анализировать эту переменную на ее наличие/отсутствие. При наличии будет эту переменную вводить в поле инпута, а при отсутствии будет оставлять предыдущее значение. Как реализовать не знаю... не хватает знаний ни JS ни AJAX.
1) в JSFiddle перенеси код уже работающей страницы, уже сгенерированной. 2) Данные вместо получаемых от сервера подсунь тестовые, в виде уже полученного объекта. Чтоб "ajax" вместо запроса к серверу просто сразу пускал этот объект в оборот. Коврять то, что есть сейчас нет никакого желания, если честно. И сходу вопрос: а почему в поле выбора именно вот ссылки? Ты ссылкой просто варианты называешь, или это именнопрям вот какие-то URL-ы? Что ты подрразумеваешь под словом "ссылка"?
Вроде получилось, вот https://jsfiddle.net/93ntvzmq/1/ По поводу ссылок. Это не обязательно должны быть именно ссылки <a...></a>, можно просто текст. Просто когда предлагаемые варианты городов выглядят как ссылки, мне кажется для пользователя так нагляднее.
у меня он реализован Код (Text): foreach ($l->GeoObjectCollection->featureMember as $key => $value) { if ($value->GeoObject->metaDataProperty->GeocoderMetaData->AddressDetails->Country->CountryNameCode=="RU" && $value->GeoObject->metaDataProperty->GeocoderMetaData->AddressDetails->Country->AdministrativeArea->SubAdministrativeArea->Locality->LocalityName) echo '<a href=\'javascript:;\' onclick=hide_city()><p onclick="$(\'#position\').val($(this).html()); document.getElementById(\'city_result\').style.display = \'none\';">'. $value->GeoObject->metaDataProperty->GeocoderMetaData->AddressDetails->Country->AdministrativeArea->SubAdministrativeArea->Locality->LocalityName .', '. $value->GeoObject->metaDataProperty->GeocoderMetaData->AddressDetails->Country->AdministrativeArea->SubAdministrativeArea->SubAdministrativeAreaName .', '. $value->GeoObject->metaDataProperty->GeocoderMetaData->AddressDetails->Country->AdministrativeArea->AdministrativeAreaName .'</p></a>'; } как показать это в JSFiddle не знаю
Пробую реализовать таким образом: Основная страница: Код (Text): <script> function hide_city(s) { if (s.text!='') $('#position').val(s.text); else $('#position').val(<? echo $city.", ".$rayon.", ".$region; ?>); document.getElementById('city_result').style.display = 'none'; return false; } </script> <input type="text" name="city_region" id="position" onkeyup="search_position(this.value)" value="<? echo $city.", ".$rayon.", ".$region; ?>" onblur="hide_city();" onfocus="this.value=''; close_div();" /> <div id="city_result"></div> Часть кода страницы search_position.php, запрашиваемой аяксом: Код (Text): echo "<a href=\'javascript:;\' onClick=\"return hide_city(this)\">$s</a><br>"; не работает в части касательно если потерян фокус импута без нажатия на ссылку. в чем ошибка?
в общем сделал... пришлось покопаться с очередностью выполнения команд в JS, и в итоге отделался двумя простыми функциями для onblur и onfocus. получился совершенно замечательный автокомплит удовлетворяющий моим потребностям.