1

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

Ссылка для проверки http://cash-back.kz/index.php/testxajax

Выкладываю Листинг: Это вид моего поиска, ничего сложного, input и div c результатами:

<input type="text" name="search" id="search"/>
<div id="search_result"></div>

дальше выкладываю javascript к передаче файлов через ajax.

$(document).ready(function() {
      $('#search').keyup(function() {
       var search = $('#search').val();
       if (search !=''){
            $.post('/index.php/testxajax/search',
            {'search':search},
              function(result) 
              {  
                if (result) {
                    $('#search_result').fadeIn("fast");
                    $('#search_result').html(result);
                    $('#autosuggest li').click(function() {
                        var string = $(this).html();
                      $('#search').val(string);
                      $('#search_result').fadeOut("fast"); 
                    });
                } else {
                    $('#search_result').html('Нет результатов');
                }
              }
            );
        } else {
        $('#search_result').html('');
        }
      }); 
     });

Вот Все это передается в php файл:

function search(){
       $this->load->model('test_model');
       $search = $this->input->post('search');
       $result = $this->test_model->get_product_title($search);
       if (!empty($result)){
            echo '<ul id="autosuggest">';
            foreach ($result as $item) {
                echo '<li>'.$item['title'].'</li>';
            }
            echo '</ul>';
       } else {
            echo false;
       }
    }

Написано на codeignither. Посмотрите? какие ошибки? может что то не учел? СПАСИБО!

7
  • 1
    я бы данные в json передавал вместо html и ещё бы сделал задержку (ожидание последней передачи, попробуйте быстро клавишт понажимать вставляя и удаляя буквы) т.е. надо сделать так - если ждем пакет, то отложить текущее состояние до момента ответа, и только потом делать новый запрос (при условии что он не равен предыдущему)
    – zb'
    5 мая 2014 в 9:31
  • ого!) и как это сделать?))))
    – duddeniska
    5 мая 2014 в 9:39
  • 1
    ну когда keyup - проверяем завершился ли как нибудь предыдущий запрос при начале запроса выставляем флаг, если да, то во первых - исполняем все в timeout 100 (clearTimeout(oldstart),setTimeout()), чтобы когда быстро набирают не было десятка попыток запросить, а-то будет тормозить, все просто, попробуйте. по поводу json - вы формируете с json_encode() массив возможных значений и на клиенте делаете из него html циклом.
    – zb'
    5 мая 2014 в 10:24
  • к сожалению, не смогу реализовать, слишком мало знаний в этой области(((((
    – duddeniska
    5 мая 2014 в 10:39
  • тогда лучше готовый плагин используйте
    – zb'
    5 мая 2014 в 10:51

2 ответа 2

3

Пару моментов для внимания:

  • Можно сократить запись для объекта DOM #search_result, написав все свойства в одну строку

  • Время задержки, что уже было сказано

  • Экранирование $_POST перед выполнением запроса в БД

  • У вас пробелы будут учитываться как непустой символ

  • Очищайте блок результатов лучше сразу после Success:

    $('#search_result').html('');
    
  • Сделайте так:

    var block =
       $('#search_result');
    

и дальше:

    block..fadeIn("fast").html('');
  • Делать запрос Ajax для одного введенного символа - не рационально, ограничьте проверкой входящей строки на .length > 2

  • В правилах хорошего тона - нужно указывать тип передаваемого запроса (данных)

  • Можно использовать простой шаблонизатор(или написать самому), чтобы исключить из PHP конструкций вида: echo '<ul>...</ul>';

2

Небольшие изменения вашей функции обратного вызова:

function(result) {
    var $searchResult = $('#search_result');
    if (result) {
        $searchResult.html(result).fadeIn('fast');
        $('#autosuggest li').on('click', function() {
            var string = $(this).html();
            $('#search').val(string);
            $searchResult.fadeOut('fast'); 
        });
    } else {
        $searchResult.html('Нет результатов');
    }
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.