0

我正在努力弄清楚如何使这项工作适用于大学项目，一些帮助会很棒！

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

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

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

但是我不知道该怎么做。

我做了一个 jquery fiddle http://jsfiddle.net/OwenMelbz/QW7Bc/我的意思而不是在这里粘贴代码。

希望你能帮忙。

谢谢

欧文

4

5 回答 5

0

你检查过 jQuery UI Autocomplete 和那里的例子吗？

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

这应该可以帮助您完成“键入时搜索”部分。

于 2011-11-12T20:28:28.890 回答
0

你可能想要这样的东西：

$("#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()在搜索之间从建议列表中删除所有项目。

于 2011-11-12T20:29:57.873 回答
0

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

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

于 2011-11-12T20:32:14.300 回答
0 
$(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 个结果，直到您的字符与其中任何一个都不匹配。

于 2011-11-12T20:34:29.603 回答
0

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

于 2011-11-12T20:46:25.880 回答