jQuery.autoComplete 多参数

时间:2022-11-03 20:57:31

query 版本 1.3.2
插件默认的 参数 是q 如果需要传递多个参数呢?
$("#stylistname").autocomplete("/page/autostylistname.php", { 
minChars: 0, 
extraParams: {shopid:function(){return $('#shopid').val();}}, 
width: 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 { width: 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; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
 
 
</body>
</html>