jquery插件autocomplete

時間 2019-12-09

標籤 jquery 插件 autocomplete 欄目 JQuery 简体版

原文原文鏈接

項目中有時會用到自動補全查詢，就像Google搜索框、淘寶商品搜索功能，輸入漢字或字母，則以該漢字或字母開頭的相關條目會顯示出來供用戶選擇， autocomplete插件就是完成這樣的功能。javascript

<html xmlns="http://www.w3.org/1999/xhtml">css

<head runat="server">html

<title>無標題頁</title>java

<%--插件

//$(document).ready(function()code

//{

//$("#<%=txtUser.ClientID %>").autocomplete("GetCode.aspx",{

// width: 155,

// selectFirst: true,

// autoFill: true,

// minChars: 0,

// scroll: true,

// mustMatch: true

// });

//});--%>

var emails = [

{ name: "Peter Pan", to: "peter@pan.de" },

{ name: "Molly", to: "molly@yahoo.com" },

{ name: "Forneria Marconi", to: "live@japan.jp" },

{ name: "Master <em>Sync</em>", to: "205bw@samsung.com" },

{ name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },

{ name: "Don Corleone", to: "don@vegas.com" },

{ name: "Mc Chick", to: "info@donalds.org" },

{ name: "Donnie Darko", to: "dd@timeshift.info" },

{ name: "Quake The Net", to: "webmaster@quakenet.org" },

{ name: "Dr. Write", to: "write@writable.com" },

{ name: "GG Bond", to: "Bond@qq.com" },

{ name: "Zhuzhu Xia", to: "zhuzhu@qq.com" }

];

$(function() {

$('#keyword').autocomplete("GetCode.aspx", {

// max: 12, //列表裏的條目數

// minChars: 0, //自動完成激活以前填入的最小字符

// width: 400, //提示的寬度，溢出隱藏

// scrollHeight: 300, //提示的高度，溢出顯示滾動條

// matchContains: true, //包含匹配，就是data參數裏的數據，是否只要包含文本框裏的數據就顯示

// autoFill: false //自動填充

//// formatItem: function(row, i, max) {

//// return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';

//// },

//// formatMatch: function(row, i, max) {

//// return row.name + row.to;

//// },

//// formatResult: function(row) {

//// return row.to;

//// }

// }).result(function(event, row, formatted) {

// alert(row.to);

// });

minChars: 0,

max:10,

width: 400,

matchCase:false,//不區分大小寫

// matchContains :true,

// autoFill: false,

scroll: false,

dataType: 'json',

scrollHeight: 500,

//此處爲傳遞參數

extraParams:{v:function() { return $('#keyword').val();}},

//須要把data轉換成json數據格式

parse: function(data) {

return $.map(eval(data), function(row) {

return {

data: row,

value: row.Guage, //此處無需把所有列列出來，只是兩個關鍵列

result: row.Matcode

}

});

formatItem: function(data, i, total) {

return "<table><tr><td align='left'>" + data.Guage + "</td><td align='right'> " + data.Unit + " </td></tr></table>";

formatMatch: function(data, i, total) {

return data.Guage;

formatResult: function(data, value) {

return data.Guage;

}

}).result(function(event, data, formatted) { //回調

$('#keyword').val(data.Matcode); //不知爲什麼自動返回值後老是加了個「,」,因此改爲後賦值

$("#content").val(data.Guage+data.Unit);

});

</script>

</head>

<body>

<div>

<%--搜索：<asp:TextBox ID="txtUser" runat="server"></asp:TextBox>--%>

</div>

</form>

</body>

</html>

相關標籤/搜索

jquery插件

autocomplete

mvc+jquery+autocomplete

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。