0

我正在尝试在我的 php 网站上构建一个提供自动完成功能的搜索功能。我注意到很多人都在推荐 jquery UI 自动完成。但我在网上查看了他们的示例,搜索他们的示例“鸟类”数据库似乎需要很长时间。我没有花时间分析示例代码,看看是否有办法加快速度。但我只是想我会问我应该探索哪些其他方式来完成同样的事情。
提前感谢您的宝贵时间!

4

2 回答 2

0

jQuery UI 的自动完成功能非常丰富而且很棒。如果您担心使用 AJAX 从数据库中获取项目的速度,请考虑预先填充嵌入在页面中的相关信息的 JSON 数组的方法。然后它几乎是瞬间的(你只会在页面上有一堆臃肿)

http://jqueryui.com/autocomplete/#default

<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
    </script>
</head>

话虽如此,AJAX 调用页面、查询数据库和返回数据的速度完全取决于您的连接和运行它的服务器。jQueryUI 的自动完成速度真的很快,我可以保证

看看他们的文档,你会惊讶于这个库的灵活性。远程数据源示例如下所示:

<script>
$(function() {
    function log( message ) {
        $( "<div>" ).text( message ).prependTo( "#log" );
        $( "#log" ).scrollTop( 0 );
    }

    $( "#birds" ).autocomplete({
        source: "search.php",
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value );
        }
    });
});
</script>
于 2012-11-21T18:47:48.090 回答
0

在您的网站中构建自动完成/实时搜索功能时,您不妨考虑使用诸如 rockitsearch.com 之类的服务。它是用于构建自动完成/搜索前端的免费网络服务。

于 2012-11-22T19:30:45.260 回答