直接上代码
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>autocompate</title> <link rel="stylesheet" href="static/themes/default/bootstrap.min.css"> <link rel="stylesheet" href="static/themes/default/jquery.ui.css"> <script src="static/script/jquery.js"></script> <script src="static/script/jquery.ui.js"></script> </head> <body> 支持上下箭头选择检索项目。<br> <input id="keywords" name="keywords" type="text" class="form-control" placeholder="请输入关键字" style="350px;margin:100px 0px 0px 100px"> <script type="text/javascript"> $(document).ready(function () { var cache = {}; $("#keywords").autocomplete({ minLength: 0,//最小长度触发搜索 delay: 300,//延迟事件来触发 autoFocus: true,//初始化以后自动设置焦点 默认为false //appendTo:"#someElem",//初始化组件搜索结果appendTo目标元素 //source: words //source: "static/json_data/search.json", source: function (request, response) { var term = request.term; if (term in cache) { response(cache[term]); return; } var seachParam={}; if($(this.element).prop("name")){ seachParam[$(this.element).prop("name")]=term; }else{ seachParam.search_keywords=term; } $.ajax({ url: "static/json_data/search.json", dataType: "json", data: seachParam, success: function (data) { cache[term] = data; response(cache[term]); } }); }, focus: function (event, ui) { return false; }, select: function( event, ui ) { $(this).blur(); } }).focus(function () { if ($(this).data("uiAutocomplete") && $(this).data("uiAutocomplete").menu.element) $(this).data("uiAutocomplete").menu.element.show(); }); }) </script> </body> </html>
QQ 交流群 ：15129679