好用的模糊搜索下拉提示

最近项目中要进行模糊搜索并进行。之前都是手写的JS,然后再进行定位。现在有了jquery.ui,这些都不用写。

还是贴代码吧:

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.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: "/UserAdd/getall.html", minLength: 2,
                select: function (event, ui) {
                
                    if (ui.item.value != "") {
                        var s = ui.item.value.split('_');
                        //alert(s);
                        $(event.target).val(s[0]);
                        event.preventDefault();

                    }
                }
            });


        });
    </script>
</head>
<body>

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" />
</div>


</body>
</html>

支持本地数组和AJAX。var s = ui.item.value.split('_'); 因为我返回的是yuhao_flyfish 所以进行拆分。

原文地址:https://www.cnblogs.com/flyfish2012/p/2947689.html