Создайте эффект предложения Google с помощью asp.net mvc и jquery - PullRequest
Новая
       17

Создайте эффект предложения Google с помощью asp.net mvc и jquery

2 голосов
/ 13 октября 2011

То, чего я хочу добиться, это не эффект автозаполнения.Я хочу добиться того, чтобы при вводе в Google результаты поиска появлялись практически мгновенно, не нажимая кнопку поиска.

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

Проблема в том, что я понятия не имею, с чего начать.

РЕДАКТИРОВАТЬ: Чтобы задать его по-другому.Предположим, у меня есть сетка с 1000 именами.Сетка уже присутствует на странице.У меня есть текстовое поле, что при наборе необходимо отфильтровать эту сетку с помощью AJAX, кнопка поиска не требуется.

Спасибо

Ответы [ 3 ]

2 голосов
/ 13 октября 2011

Используйте PartialView и jQuery.ajax. 

$(document).ready(function () {
    $("#INPUTID").bind("keypress", function () {
        if($(this).val().length > 2) {
            $.ajax({
                url: "URL TO CONTROLLER ACTION",
                type: "POST|GET",
                data: {query: $("#INPUTID").val(),
                success: function (data, responseStatus, jQXHR)
                {
                    $("#WRAPPERDIVID").html(data);
                }
            });
        }
    });
});

Тогда по вашему мнению: 

<div>
    <input type="text" id="INPUTID" />
</div>
<div id="WRAPPERDIVID"></div>

Редактировать

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

1 голос
/ 13 октября 2011

Вот хороший пример, который вы можете проверить здесь попробуйте ввести 's' в поиске

если это то, что вы хотите тогда код и учебник здесь

еще один хороший пример здесь

0 голосов
/ 14 октября 2011

Если вы работаете над «фильтрацией» набора, уже расположенного на странице, то, похоже, вы хотите установить видимость элементов в списке на основе критериев поиска.

Если это так, то сначала вам нужно сначала установить HTML для каждого элемента. Вы можете использовать следующее для каждого элемента: 

<div class="grid">
    <div class="item"><input type="text" value="{name goes here}" readonly="readonly" /></div>
    { 999 other rows }
</div>

Затем вы должны использовать некоторые jquery для установки каждой строки видимой / невидимой на основе критериев поиска: 

$("#searchBox").live("change", function () {
    $("div[class='grid'] input").each(function () {
        var search = $("#searchBox").val();
        if ($(this).val().toString().indexOf(search) != -1)
            $(this).parent().show();
        else
            $(this).parent().hide();
    });
});

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

...