Я использую автозаполнение AJAX.
Идея состоит в том, чтобы отобразить HTML-страницу справа от поля ввода на основе условий поиска.
HTML PART: [и с использованием rails: layout => false]
Страница, которая должна быть отображена, выглядит следующим образом, когда поисковый термин dolore :
{"label":"laboriosam praesentium amet ea et qui non consequatur quod","value":1}
{"label":"aut omnis non quia aut animi","value":2}
{"label":"eveniet pariatur dicta quae ut","value":3}
{"label":"voluptatem ad quaerat aut atque est alias a quo","value":4}
{"label":"dolorem labore nisi natus labore dolorum eum","value":5}
Часть AJAX: [с использованием AJAX, непосредственно вставленной из автозаполнения]
$(document).ready(function(){
$('#title_name').keyup(function(){
var input = $('#title_name').val();
if (input.length > 2) {
$.ajax({
url: "/search/titles",
data: "search="+input,
success: function(msg){
$("#suggest-title").html(msg);
$("#suggest-title div .titlelist").mouseover(function(){
$("#suggest-title div .titlelist").removeClass("search_hover");
$(this).addClass("search_hover");
});
$("#suggest-title .titlelist").click(function(){
var field_value = $(this).html();
$("#title_name").val(field_value);
$("#title_name").append('<input type="hidden" name="title_id" value="5" />');
$("#suggest-title").remove();
});
}
});
}
});
});
TODO: Идея состоит в том, чтобы показать часть «метки» пользователю при поиске, но при отправке идентификатора обратно на сервер.