zoukankan      html  css  js  c++  java
  • 好用的模糊搜索下拉提示

    最近项目中要进行模糊搜索并进行。之前都是手写的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 所以进行拆分。

  • 相关阅读:
    P4396 [AHOI2013]作业
    NOIP2018普及T2暨洛谷P5016 龙虎斗
    NOIP2018普及T1暨洛谷P5015 标题统计 题解
    【交题大桥】团队信息存档
    markdown浅谈
    洛谷P1690 贪婪的Copy 题解
    洛谷P4994 终于结束的起点 题解
    洛谷P4995 跳跳!题解
    这么多都变了,洛谷4还会远吗?
    洛谷P1396 营救 题解
  • 原文地址:https://www.cnblogs.com/flyfish2012/p/2947689.html
Copyright © 2011-2022 走看看