• 好用的模糊搜索下拉提示


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

  • 相关阅读:
    CV
    Flutter 概览
    spaCy 基本使用
    图像读写、属性
    图像原理
    NLP 实战
    NLTK 相似性度量
    NLTK 停用词、罕见词
    NLTK 词干提取、词形还原
    NLTK 基本操作
  • 原文地址:https://www.cnblogs.com/flyfish2012/p/2947689.html
Copyright © 2020-2023  润新知