input 模糊匹配功能文本框模糊匹配(纯html+jquery简单实现) demo-CFANZ编程社区

input 模糊匹配功能文本框模糊匹配(纯html+jquery简单实现) demo

<!DOCTYPE HTML>
<html lang="en">
<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
      <title> input 模糊匹配功能</title>

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <link rel="stylesheet" href="http://jqueryui.com/autocomplete/resources/demos/style.css">

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
        $(function () {
            var availableTags = [
                {label: "Chinese", value: "1"},
                {label: "English", value: "2"},
                {label: "Spanish", value: 3},
                {label: "Russian", value: 4},
                {label: "French", value: 5},
                {label: "Japanese", value: 6},
            ];
            $("#tags").autocomplete({

                source: availableTags,

                select: function (event, ui) {
                    // 这里的this指向当前输入框的DOM元素
                    // event参数是事件对象
                    // ui对象只有一个item属性，对应数据源中被选中的对象

                    console.log( ui.item.label);
                    console.log( ui.item.value);
                    $(this).value = ui.item.label;

                    ui.item.value = ui.item.label ;

                    // 必须阻止事件的默认行为，否则autocomplete默认会把ui.item.value设为输入框的value值
                    //  event.preventDefault();
                }

            });
        });
    </script>
</head>
<body>
<div class="ui-widget">
      <label for="tags">输入内容: </label>
      <input id="tags">
</div>
</body>
</html>