使用asp.net mvc和jquery创建google suggest效果

Question

我想要实现的不是自动完成效果。我想要实现的是，当您在谷歌上输入时，搜索结果几乎立即出现，而无需单击搜索按钮。

我已经使用搜索按钮完成了 ajax 示例，但我希望它能够在您键入时使其工作，并在表格中显示结果。

问题是我不知道从哪里开始。

编辑：以另一种方式询问。 假设我有一个包含 1000 个名字的网格。网格已经存在于页面上。 我有一个文本框，输入时必须使用 AJAX 过滤该网格，不需要搜索按钮。

谢谢

Answer 1

使用 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 秒未键入内容后提交请求，这样您就不会在每次按键事件时收到请求。

Answer 2

有一个很好的例子，您可以检查这里尝试输入's'搜索

如果这就是你想要的
那么代码和教程是这里

另一个很好的例子这里

Answer 3

如果您正在“过滤”页面上已存在的集合，那么您似乎想要根据搜索条件设置列表中项目的可见性。

如果是这样，那么首先，您需要为每个项目建立 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();
    });
});

这将导致每个项目的可见性发生变化，具体取决于搜索中的文本是否框匹配项目中的任何文本。