Как ограничить количество поисковых запросов с помощью автозаполнения интерфейса Jquery? - PullRequest
Новая
       40

Как ограничить количество поисковых запросов с помощью автозаполнения интерфейса Jquery?

2 голосов
/ 11 февраля 2011

В настоящее время я использую расширение JQuery UI для автозаполнения поиска. Однако мне нужно иметь возможность ограничить список матчей 10. Кроме того, мне также нужна кнопка внизу, которая вызовет следующие 10 (гипотетических) матчей. Пока у меня есть это в качестве моего кода: 

<script>
    $(document).ready(function() {
        var termTemplate = "<span class='ui-autocomplete-term'>%s</span>";

        $('input#autocomplete').autocomplete({
            source: ['johannesburg z', 'johannesburg x', 'johannesburg v','johannesburg b','johannesburg a','johannesburg q', 'johannesburg u', 'johannesburg y', 'johannesburg o', 'johannesburg p'],
            minLength: 3,
            open: function(e,ui) {

                var
                    acData = $(this).data('autocomplete'),
                    styledTerm = termTemplate.replace('%s', acData.term);

                acData
                    .menu
                    .element
                    .find('a')
                    .each(function() {
                        var me = $(this);
                        me.html( me.text().replace(acData.term, styledTerm) );
                    });

            }
        });
    });  
</script>

и HTML 

<body>
    <input id="autocomplete" />
    <input type="button" class="hello" />
</body

Iv уже проверил аналогичные решения, но, похоже, ничего не работает.

Ответы [ 2 ]

1 голос
/ 07 июля 2011

Я бы обработал большую часть этой серверной стороны.

Например, ограничьте количество результатов на сервере до 10, а затем выведите их через JSON для клиента.

Что касается кнопки, которая прокручивает к следующему списку результатов, вам нужно будет реализовать нечто, имитирующее форму нумерации страниц. Раскрывающийся список автозаполнения должен поддерживать смещение для результатов. Первоначально предел, очевидно, равен десяти, а смещение равно 0 (начало результатов, в зависимости от того, как вы их упорядочили на выходе). При нажатии кнопки потребуется запросить больше результатов с сервера и, в конечном итоге, передать другую переменную GET (а также term), которая будет представлять смещение результатов.

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

0 голосов
/ 24 февраля 2011

Не ваш точный ответ, но пойти на это 

$( ".selector" ).autocomplete({ minLength: 5 });

С сайта

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

http://jqueryui.com/demos/autocomplete/#option-minLength

...