外贸建站之jQuery+ajax搜索自动填充实例代码分享
$("#xri_ProSch_Query").autocomplete({
source: "https://www.chinaobd2.com/ajax/q_autocomplete.asp",
minLength: 2,
delay: 500
});
q_autocomplete.asp 查询代码
[{"label": "VAS5054A", "value": "VAS5054A"}, {"label": "vas5054a kit", "value": "vas5054a kit"}]
CSS修饰
ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; z-index: 99999; }
额外补充案例：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/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: availableTags }); }); </script> </head> <body> <div class="ui-widget"> <label for="tags">标签：</label> <input id="tags"> </div> </body> </html>
以上代码是我们应用在chinaobd2.com项目上面的真是案例，仅供大家参考学习。