jQuery.autoComplete 多参数

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>

posted on 2016-03-31 12:46 大西瓜3721 阅读(496) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

历史上的今天：
2015-03-31 MVC 数据验证

大西瓜3721

jQuery.autoComplete 多参数

导航

我的标签

随笔分类

随笔档案

评论排行榜

推荐排行榜

最新评论