Реализую автозаполнение с помощью AJAX по
этому примеру.
Всё работает. Но мне надо еще передавать дополнительный код в мой контейнер.
Пока передаю только выбранный текст из БД в текстовое поле автозаполнения.
Как нужно изменить функцию function select_this(val) или добавить новую, чтобы передавать дополнительный код в мой контейнер (id="autocomplete_search_code")?
Кратко (ниже есть спойлер подробно, если что...)
Вот php код. Это то, что отображается в выпадающем списке. Пользователь щелкает по пункту и вызывает функцию select_this, которая заполняет поле (см ниже):
//Возвращаемый код (результаты)
//Наверно стоит передать функции select_this ещё один аргумент - дополнительный код?
echo"<li onClick=\"select_this('То, что окажется в поле автозаполнения');\">Текст из бд в выпадающем списке</li>";
//Как то так?
/*
echo"<li onClick=\"select_this('То, что окажется в поле автозаполнения', 'То, что будет вставлено в контейнер autocomplete_search_code');\">Текст из бд в выпадающем списке</li>";
*/
А вот и функция select_this в которую мы передаем аргумент из кода выше.
По событию onClick. А конкретно - "То, что окажется в поле автозаполнения"
И она это вставляет в поле автозаполнения. Вот бы ещё вставляла скрытый код в контейнер....
/*
Вот функция, заполняющая текстовое поле автозаполнения.
Наверно её нужно изменить? У нас же теперь должно быть 2 аргумента.
*/
function select_this(val) {
$("#autocomplete_search_box").val(val);
$("#autocomplete_suggesstion_box").hide();
}
Код моей формы, с полями и контейнером:
<form method="post" action="actions.php?do_it">
<input type="text" id="autocomplete_search_box" />
<div id="autocomplete_suggesstion_box"></div>
<!-- Мой контейнер, в который я хочу получить код -->
<div id="autocomplete_search_code"></div>
</form>
Подробно
HTML код - форма. В контейнер autocomplete_search_code я хочу получить код, при выборе пункта из списка автозаполнения. Пользователь выбрал ФИО - в текстовом поле ФИО, а в контейнере появился код.
<form method="post" action="actions.php?do_it">
<!-- Текстовое поле автозаполнения -->
<input type="text" id="autocomplete_search_box" />
<!-- Выпадающий список автозаполнения -->
<div id="autocomplete_suggesstion_box"></div>
<!-- Мой контейнер, в который я хочу получить код -->
<div id="autocomplete_search_code">
<!-- Тут, при выборе из списка, должно быть <input type="hidden" name="..." value="..."> -->
</div>
</form>
....
//Возвращаемый код (результаты)
echo"<li onClick=\"select_this('$result_after_select');\">$result_before_select</li>";
/*
Т.е. выводим в html
<li onClick="select_this('Иванов И.И. - это будет в текстовом поле, при клике по пункту из списка');">Иванов Иван Иванович - это будет видно в выпадающем списке</li>
Наверно, нужно передать функции select_this ещё один аргумент - в идеале код типа
<input type="hidden" name="..." value="...">
*/
Код JS полностью аналогичный примеру. Рабочий код:
$(document).ready(function(){
$("#autocomplete_search_box").keyup(function(){
$.ajax({
type: "POST",
url: "select_data.php",
data:'keyword='+$(this).val(),
beforeSend: function(){
$("#autocomplete_search_box").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
},
success: function(data){
$("#autocomplete_suggesstion_box").show();
$("#autocomplete_suggesstion_box").html(data);
}
});
});
});
/*
Вот функция, заполняющая текстовое поле автозаполнения.
Наверно её нужно изменить.
*/
function select_this(val) {
$("#autocomplete_search_box").val(val);
$("#autocomplete_suggesstion_box").hide();
}
