Как реализовать окно мгновенного поиска с ASP.NET MVC 3 / jQuery?

Question

Я бы хотел добавить окно мгновенного поиска, похожее на окно поиска Google, в мое приложение ASP.NET MVC 3. То есть, когда вы вводите текст в поле поиска, приложение должно автоматически показывать соответствующие результаты поиска, а под окном появляется раскрывающееся меню с предложениями. Также должен быть элемент управления для очистки поля (X справа от окна поиска Google).

Я довольно новичок в разработке веб-приложений, но, полагаю, необходим Javascript. Мы собираемся использовать jQuery в этом проекте, хотя мы еще не добавили Javascript.

Так как я могу реализовать интерфейс окна поиска, указанный выше? Есть какой-нибудь готовый компонент jQuery?

Answer 1

Вот отличный блог пост , чтобы вы начали использовать автозаполнение jQuery с веб-страницами Razor и базой данных SQL CE.

Answer 2

Я бы посоветовал использовать jQuery UI для его автозаполнения компонента.

Он может быть настроен либо для просмотра предварительно определенного локального списка данных, либо для выполнения поиска в режиме реального времени по мере ввода пользователем.

Код для простого примера использования статического поиска приведен ниже:

<script>
    $(function() {
        var availableTags = [
            "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
        });
    });
    </script>



<div class="demo">

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>

</div><!-- End demo -->



<div class="demo-description" style="display: none; ">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->

Answer 3

Как работает быстрый поиск?

Фокус установлен на текстовое поле. Пользователь нажимает клавишу, и в случае события javascript keyup (в зависимости от браузера) вы отправляете содержимое этого текстового поля на веб-сервер.

Веб-сервер прочитает этот контент, сгенерирует результат, потенциально модель представления, содержащую 10 результатов, и передаст этот результат обратно в веб-браузер.

Затем вы будете jQuery, чтобы взять этот результат и вставить его в некоторый div, например Контент идет сюда

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

Редактировать: Что касается плагинов для быстрого поиска - да, есть некоторые, но вы должны знать о том, как это работает и что может пойти не так, поэтому перед использованием плагина напишите что-то очень простое чтобы увидеть, как все это работает. Удачи.