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/

该页面上有一个示例，它根据您键入的内容降低db的结果。我假设你可以从那里拿走它（获取点击的项目并将其添加到你的页面/块）。我希望我理解你的问题。

Answer 4

$(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个结果，直到你有一个与其中任何一个都不匹配的字符。

Answer 5

updated fiddle为懒惰的学生。（啊，好日子^^）

jQuery搜索数组通过textfield

5 个答案: