使用 asp.net mvc 和 jquery 创建 google 建议效果答案

【问题标题】：Create google suggest effect with asp.net mvc and jquery使用 asp.net mvc 和 jquery 创建 google 建议效果
【发布时间】：2011-12-07 05:58:31
【问题描述】：

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

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

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

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

谢谢

【问题讨论】：

我只是根据一种情况的搜索类型来回答，现在你说的是过滤器，两种完全不同的动物。过滤器会有点不同，但您将加载结果，然后使用 jQuery 对包含您要查找的单元格值的行进行过滤。

标签： asp.net-mvc-3 jquery-ui jquery asp.net-ajax

【解决方案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 秒无输入后提交请求，这样您就不会在每次按键事件时都收到请求。

【讨论】：

可以在第三次按键后执行此操作吗？因为前 2 个字符的结果可能太多
@Luis - 查看我的编辑。我已经更新它来查看输入的长度。 - 山姆

【解决方案2】：

有一个很好的例子你可以检查here尝试在搜索中输入's'

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

另一个很好的例子here

【讨论】：

不，正如我上面所说，我不想要一个自动完成的文本框，谷歌的效果是当你输入时你会看到下面的结果，它就像一个转发器，它不是在文本框的正下方是进一步向下.
@Luis 试试这个答案stackoverflow.com/questions/7558308/… 我也猜this 会帮助你

【解决方案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();
    });
});

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

【讨论】：