Любой может предложить автозаполнение поиска
Я новичок, и я ищу способ иметь окно поиска с автозаполнением, как в Google.
Я искал, и лучшая перспектива, которую я нашел, кажется это сообщение на форуме. Парень, который предложил это, говорит, что он использует это с этот проект на Google Code который мертв, потому что мне удалось установить searchable в моей последней попытке выяснить cakephp.
Дело в том, что я раньше не пользовался большим количеством javascript, и меня немного смущает, что именно я собираюсь делать. Документация с кодами автозаполнения не содержит подробностей, которые я могу понять.
Если мы предположим, что мне удастся правильно установить поведение для поиска, может ли какой-нибудь добрый человек объяснить мне, как я могу заставить работать автозаполнение?
Это говорит просто использовать:
$("selector").autocomplete(url [, options]);
например:
$("#input_box").autocomplete("autocomplete_ajax.cfm");
Автозаполнение ожидает, что элемент ввода с идентификатором «input_box» существует. Когда пользователь начинает вводить данные в поле ввода, автозаполнение запросит autocomplete_ajax.cfm с параметром GET с именем q
Это немного, что я не понимаю. Где я должен это положить? И как только я положил его куда-нибудь, мне нужно просто назвать один из моих входов «input_box»?
заранее спасибо.
Решение
Используйте это, когда у вас есть заранее заданный список параметров поиска
Код jQuery:
$(function() {
var availableTags = [ //array of searchable options
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"];
$( "#tags" ).autocomplete({
source: availableTags
});
});
HTML код:
<label for="tags">Tags: </label>
<input id="tags">
Источник: http://jqueryui.com/autocomplete/
Используйте это при поиске в базе данных предложений автозаполнения
Код jQuery:
$('input#input_box').keypress(function(){ //letter has been pressed
var search = $(this).val();
$.ajax({
url : 'autocomplete_ajax.php', //the php page that will handle the request
type : 'GET', //the method of sending the data
data: 'q='+search, //the data you are sending
success : function(data){
//the variable 'data' will be whatever the php outputs (via
//any method - echo, exit, print, print_r etc. you can
//use data from php page to output wherever you want, e.g.
$('div#search_autosuggestbox').html(data);
}
});
});
HTML:
<input id="input_box" />
<div id="search_autosuggestbox"></div>
РЕДАКТИРОВАТЬ: добавлены названия страниц / значения, соответствующие вопросу
Другие решения
Вы можете попробовать установить свой источник так:
$("#input_box").autocomplete({source: "autocomplete_ajax.cfm"});