Живой поиск. Как реализовать фичу

[laimas]

Все о Яндексе, все это живой поиск. Но не надо сравнивать поиск Яндекса в своем кеше или в интернете, с вашим списком городов, это большая разница. Яндекс имеет право предложить на его взгляд подходящее, а вы нет, ибо у вас выбор ограничивается строгим набором.

Из всего сказано ясно, что именно живой поиск вам и нужен, а "могли ТОЛЬКО выбирать из предлагаемого списка вариантов", это и есть ваше ограничение, и имеет иной смысл.

autocomplete у меня вообще OFF стоит.

Это атрибут формы/полей, а таким же образом называют и плагины которые и занимаются живым поиском, Их наплодили уже достаточно много, можете для интереса найти и просмотреть их демонстрации.

А теперь по вашему.

Города в базе нужно держать в отдельной таблице под уникальным идентификатором каждый. Вывод списка городов, это вывод названия города как текста опции, а его идентификатора как ее значения. Другими словами, в вашем случае лучше иметь костомизированный список, который будет работать в фонов режиме и отправлять на сервер выбор пользователя, а список UL отображать данные. Можно конечно поступить так как и у вас, но LI должны иметь в атрибутах идентификатор городов, которые передаются в скрытое поле при выборе, которое будет отправлять серверу выбор пользователя.

Если пользователь может выбрать только из предлагаемого, то скрытое поле должно очищаться уже при получении фокуса полем ввода поиска.

Если пользователь осведомлен, что он не может ввести произвольный город, а список предложений будет только в случае найденного, то сообщать что ничего не найдено большого смысла нет. Просто списка естественно не будет в этом, что и есть результат "не найдено", разве это не понятно и без сообщения?

$i=0;
while ($row = $db_referal -> fetch_array()) {
$i++;

Зачем этот не нужный счетчик? Сам результат запроса уже отвечает на этот вопрос - есть ли записи или нет - $db_referal->num_rows(). Если вернется более 0, значит есть совпадения, и сразу отдаем клиенту весь набор как JSON, если вместо $db_referal->fetch_array() использовать $db_referal->fetch_all():

$db_referal = $mysqli -> query("SELECT field_id, field_name from ".PREFIX."city WHERE city LIKE '%$referal%'"); //надеюсь баг с дырой будет исправлен
//отдаем клиенту результат и выход
exit(json_encode($db_referal->num_rows() ? $db_referal->fetch_all() : null));
//или проще, так как если не будет найдено то будет возвращен пустой массив
//и проверять количество возвращенный записей нет необходимости
exit(json_encode($db_referal->fetch_all() ?: null));

На клиенте:

//response выбросить
dataType: 'json',
success: function(data){
                    if($data) //строим и показываем список по полученным данным
                    else //ничего не найдено, списка не будет
                }

И еще раз - отдавать клиенту html с намеренно добавленным \n, кстати в Win, это \r\n (в РНР для этого есть константа PHP_EOL, она сама разберется что конкретно на платформе) это просто бессмысленно, мусор это. Идеальный html, это одна длиииииинная строка, а структуру его всегда можно просмотреть в отладчике.

[veg]

Города в базе нужно держать в отдельной таблице под уникальным идентификатором каждый. Вывод списка городов, это вывод названия города как текста опции, а его идентификатора как ее значения.

Так и есть. У каждого города есть свой идентефикатор, но это следующим шагом хотел сделать. До это был выпадающий список городов (<select>), но так как количество городов около 1000, и листать в поисках нужного не есть хорошо, решил прибегнуть к варианту из-за которого собственно тема и открылась. Пользователь мог выбрать город, а обработчику передавался id этого города.
Снимок.JPG

Если пользователь осведомлен, что он не может ввести произвольный город, а список предложений будет только в случае найденного, то сообщать что ничего не найдено большого смысла нет. Просто списка естественно не будет в этом, что и есть результат "не найдено", разве это не понятно и без сообщения?

Пользователь не осведомлен. Он узнает об этом только тогда, когда выйдет сообщение о том, что город не найден.

Получилось следующее. Реакции на ввод данных нет.

$db_referal = $mysqli -> query("SELECT id,city from ".PREFIX."city WHERE city LIKE '%$referal%'");

 exit(json_encode($db_referal->fetch_all() ?: null));

data: 'json',
                success: function(data){
                     //Выводим полученные данные в списке
					 if($data) {$(".search_result").html(data).fadeIn();}//строим и показываем список по полученным данным
					 else {}//ничего не найдено, списка не будет

                }

[laimas]

Заходим на страничку Гугла, Яшки, Бинг и прочих, начинаем поиск - есть ли список предложений, если робот ничего не найдет? Тоже самое и у вас. А пользователь должен знать сразу, что он может выбрать только тот город, который у вас оговорен условиями. Живой же поиск, это как раз сервис, чтобы не выводить длинную портянку, и не иметь представления о том как он работает в данное время может только пьяный ежик. )
Хотите еще и контрольный выстрел, ну так причем тут не найдено? Тогда уже сообщайте пользователю, что данный город (введенный пользователем) ваш сайт не принимает/не одобряет/или иная какая-то причина, иначе как же он узнает почему не может ввести произвольное? Уж как-то надо поставить в известность бедного пользователя.

Реакции, на ввод данных, нет.

И не будет - я вам показал кодом, что сервер возвращает не готовый html-список, а json-строку, которую jQuery преобразует в объект. Это в случае если будут найдены совпадения. Объект (data) - это будет массив объектов, то есть запрос возвращает id и city поля, и объект будет например такой:

data = [
  {"id" : 12, "city" : "Волгоград"},
  {"id" : 15, "city" : "Воронеж"},
   ......
]

Этот массив объектов нужно обойти циклом и построить по ним список. Или не известно как это делается, да еще посредством JQ?

А если data пуст, значит нет и списка, а уж надо сообщать и что при этом решайте сами.

Примечание: если JSON и показанный код ответа, то fetch_all(MYSQLI_ASSOC). Не используйте fetch_array() если в этом нет необходимости, это на будущее.

Чтобы объект был именно таким {"id" : 12, "city" : "Волгоград"}, нужно указать параметры кодирования:

exit(json_encode($db_referal->num_rows() ? $db_referal->fetch_all() : null, JSON_NUMERIC_CHECK | JSON_UNESCAPED_UNICODE));

если они доступны - первый с 5.3.3, второй с 5.4.0

[veg]

С json работал, только средствами php все обрабатывал.
Сделал так. Все выводится, сейчас буду допиливать.

$(function(){
    
    //Живой поиск
    $('.who').bind("change keyup input click", function() {
        if(this.value.length >= 2){
            $.ajax({
                type: 'post',
                url: "search.php", //Путь к обработчику
                data: ({'referal':this.value,'id':this.id}),
                response: 'text',
                success: function(data){
                    $(".search_result").html(data).fadeIn(); //Выводим полученые данные в списке
                }
            })
        }
		
		
    })
    
    $(".search_result").hover(function(){
        $(".who").blur(); //Убираем фокус с input
    })
    
    //При выборе результата поиска, прячем список и заносим выбранный результат в input
    $(".search_result").on("click", "li span", function(){
        s_user = $(this).value;
		s_id =  $(this).id;
		$(".search_result").fadeOut();
        $(".who").val(s_user); //деактивируем input, если нужно
        
    })

})

$db_referal = $mysqli -> query("SELECT id,city from ".PREFIX."city WHERE city LIKE '%$referal%'");
    
	
	exit(json_encode($db_referal->fetch_all() ?: null,JSON_NUMERIC_CHECK | JSON_UNESCAPED_UNICODE));

[laimas]

Пусть сервер вернул показанное в примере на ввод "во", стоим список:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script> 
$(function() {
//это вернул сервер в success
var data = [
  {"id" : 12, "city" : "Волгоград"},
  {"id" : 15, "city" : "Воронеж"}
];
//success обработчик
var ul = $('ul.search_result');
$.each(data, function() {
    ul.append('<li data-id="' + this.id + '">' + this.city + '</li>')
})
});
</script>     
</head> 
<body>
<ul class="search_result"></ul>
</body> 
</html>

Список строится?

Почему без ID? Или вы намерены вместо идентификаторов использовать имена? В скрытое поле нужно передвать идентификатор. А можно и в LI спрятать радио кнопки с label, и значение у которых есть идентификаторы, значение выбранной кнопка будет отправлено серверу.

[veg]

Да. Список выводится в таком формате.
Снимок.JPG
ID хочу занести в скрытый input

[laimas]

ID хочу занести в скрытый input

Ну так чтобы его занести по выбору пользователя, его же нужно получить и получить выбранного города, а значит идентификаторы городов нужно помещать в атрибуты списка, например как я показал. У вас же не видно, что они вообще используются.

[veg]

Ну список выше прислал, ID в li занесен будет конечно, я пока разбираюсь с json.
Не выводит список когда добавил Ваш код.

url: "search.php", //Путь к обработчику
                data: ({'referal':this.value,'id':this.id}),
                
                success: function(){
					
					var ul = $('ul.search_result');
						$.each(data, function() {
						ul.append('<li data-id="' + this.id + '">' + this.city+ '</li>')

						});
                    $(".search_result").html(data).fadeIn(); //Выводим полученые данные в списке

[laimas]

Поиск в базе осуществляется по введенному пользователем тексту, откуда у "неизвестного еще для сервера" может оказаться ID?

data: ({'referal':this.value,'id':this.id}) - с чего это тут появилось и откуда?

Полученное нужно обработать, data, это аргумент функции обработчика, куда он исчез? То что у меня в примере это объявлено как глобальная переменная, так это только для примера, чтобы его можно было запустить для просмотра.

dataType : 'json', //обязательно или если не указывать, то сервер должен передавать соответствующий заголовок
success: function(data){
    if(data) { //если найдены совпадения 
        var ul = $('ul.search_result').empty().show(); //эффекты типа fadeIn() вряд ли уместны здесь
        //это и есть добавление в список
        $.each(data, function() {
            ul.append('<li data-id="' + this.id + '">' + this.city+ '</li>')
        });
        //а $(".search_result").html(data) при том что data есть объект, это чушь
        //о fadeIn() выше сказано
    } else {
        //действия в случае если не найдено совпадений
    }
}