JQuery UI Autocomplete

来源：互联网发布：阿里云短信接口 php 编辑：程序博客网时间：2024/05/21 17:37

<!doctype html><html lang="en"><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>jQuery UI Autocomplete - Remote datasource</title>    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">    <style>        .ui-autocomplete-loading {            background: white url("../images/ui-anim_basic_16x16.gif") right center no-repeat;        }    </style>    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>    <script>        $(function () {            function log(message) {                $("<div>").text(message).prependTo("#log");                $("#log").scrollTop(0);            }            $("#birds").autocomplete({                source: "../handler/CommonHandler.ashx?",                minLength: 0,                select: function (event, ui) {                    log(ui.item ? "Selected value = " + ui.item.value + ",id = " + ui.item.id : "Nothing selected, input was " + this.value);                    event.preventDefault();                    $("#birds").val(ui.item.label);                },                focus: function (event, ui) {                    event.preventDefault();                    $("#birds").val(ui.item.label);                }            });        });    </script></head><body>    <div class="ui-widget">        <label for="birds">Birds: </label>        <input id="birds">    </div>    <div class="ui-widget" style="margin-top:2em; font-family:Arial">        Result:<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>    </div></body></html>

source：是远程请求地址，请求返回的格式如下：

当你输入关键词时，插件会根据你设置的minLength的限制开始向URL请求，注意URL中会自动添加term参数，如下：

http://localhost:52865/handler/CommonHandler.ashx?&term=k

当你进行上下选择的时候，默认会选择value到input输入框，在select事件中，添加如下代码：

select: function (event, ui) {                   event.preventDefault();                    $("#birds").val(ui.item.label);                },                focus: function (event, ui) {                    event.preventDefault();                    $("#birds").val(ui.item.label);                }

参考链接：

http://stackoverflow.com/questions/7642855/autocomplete-applying-value-not-label-to-textbox

http://api.jqueryui.com/autocomplete/

0 0