jQuery 通过文本字段搜索数组

Question

我正在努力弄清楚如何使这项工作适用于大学项目，一些帮助将是惊人的！

我有一个存储大量项目的 mysql 数据库。 （我可以做到这一点没有问题）。

我有一个搜索框，需要在您键入时搜索项目数据库。 （我确定您知道我的意思？有点像谷歌即时搜索）

当您单击从建议项目下拉的可能列表中的项目时。 它通过 jquery 附加一个无序列表以在其中添加项目。

但是我不知道该怎么做。

我做了一个jquery小提琴http://jsfiddle.net/OwenMelbz/QW7Bc/意思是而不是在此处粘贴代码。

希望你能帮忙。

谢谢

欧文

Answer 1

您检查过 jQuery UI Autocomplete 和那里的示例吗？

http://jqueryui.com/demos/autocomplete/

这应该可以帮助您解决“搜索为你输入”部分。

Answer 2

您可能想要这样的东西：

$("#text").keyup(function() {
    var input = $("#text").val();
    $.post("someurl/myService.cgi", {
        searchTerm: input
    },
    function(data) {
        $.each(data, function(index, value) {
            $("#list").append("<li>" + value + "</li>");
        });
    },
    'json'
});

不过，在将数据发布到服务器之前，您应该对输入进行一些验证。使用 $.data() 缓存一些搜索结果也可能是一个想法，除非它堆积太多，以避免过多的服务器命中。您可以使用 $("#list").empty() 在搜索之间从建议列表中删除所有项目。

Answer 3

尝试查看 http://jqueryui.com/demos/autocomplete/

该页面上有一个示例这会根据您输入的内容从数据库中获取结果。我假设您可以从那里获取它（获取单击的项目并将其添加到您的页面/块）。
我希望我正确理解了你的问题。

Answer 4

为懒惰的学生更新了小提琴。 （啊啊，美好的旧时光^^）

Answer 5

$(function() {
    $('#list').hide();
    $("#find").click(function(){
        $('#list').toggle();
    });
    $('#find').bind('keyup', function(){
        $('ul#list li').css({display : 'none'});
        $('#list li').each(function(){
            var e = $(this).text().toLowerCase();
            if (e.indexOf($('#find').val().toLowerCase()) != -1){
                $(this).css({display : 'block'});
            }
        });
    });
});

用这个替换你的js。当您键入时，它会填充 ul。注意：要查看它的工作原理，请确保一直进行到第 2 项，因为它与字符匹配，您将看到所有 3 个结果，直到有一个字符与其中任何一个都不匹配。