query 版本 1.3.2
插件默认的 参数 是q 如果需要传递多个参数呢？
$("#stylistname").autocomplete("/page/autostylistname.php", {
minChars: 0,
extraParams: {shopid:function(){return $('#shopid').val();}},
170,
selectFirst: false,
dataType: "json",
formatResult: function(data) { return data.name; },
parse: function(data) { return $.map(data, function(row) { return { data: row, value: row.name, result: row.name } }); },
formatItem: function(item) { if(item.jobnumber.indexOf('号')>-1){ return item.name+' '+item.jobnumber; } return item.name+' '+item.jobnumber+'号'; } });
红色部分即为需要的参数
html页面
<input id='shopid' value=''/>
在php 页就可以 用 $_GET['shopid'] 获取了
query-ui 版本 1.8.1以上
<html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Remote JSONP datasource</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <style> .ui-autocomplete-loading { background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat; } #city { 25em; } </style> <script> $(function() { function log( message ) { $( "<div>" ).text( message ).prependTo( "#log" ); $( "#log" ).scrollTop( 0 ); } $( "#city" ).autocomplete({ source: function( request, response ) { $.ajax({ url: "http://gd.geobytes.com/AutoCompleteCity", dataType: "jsonp", data: { q: request.term }, success: function( data ) { response( data ); } }); }, minLength: 3, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value); }, open: function() { $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" ); }, close: function() { $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" ); } }); }); </script></head><body><div class="ui-widget"> <label for="city">Your city: </label> <input id="city"> Powered by <a href="http://geonames.org">geonames.org</a></div><div class="ui-widget" style="margin-top:2em; font-family:Arial"> Result: <div id="log" style="height: 200px; 300px; overflow: auto;" class="ui-widget-content"></div></div></body></html>