Jquery autocomplete外掛的使用示例
簡單用法：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../css/autocomplete/jquery.autocomplete.css"/>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript">
$(function(){
var data = "the People's Republic of China".split(" ");
$("#autocomplete").autocomplete(data,{minChars:0}).result(function(event,data,formatted){
alert(data);
});
});
</script>
</head>
<body>
<input type="text" id="autocomplete"/>
</body>
</html>
更多引數說明：
第一個引數除了本地資料外，還可以是url請求路徑。
配置項引數說明：
dataType（String）：資料型別.Default:text，如果第一個引數是url地址，並且返回的是json資料，則設定此配置屬性為'json'即可；
minChars（Number）：在觸發autoComplete前使用者至少需要輸入的字元數.Default: 1，如果設為0，在輸入框內雙擊或者刪除輸入框內內容時顯示列表；
max（Number）：autoComplete下拉顯示專案的個數.Default: 10；
width（Number）：指定下拉框的寬度. Default: input元素的寬度；
delay（Number）：擊鍵後啟用autoComplete的延遲時間(單位毫秒).Default: 遠端為400 本地10；
autoFill（Boolean）：要不要在使用者選擇時自動將使用者當前滑鼠所在的值填入到input框. Default: false；
mustMatch（Boolean）：如果設定為true,autoComplete只會允許匹配的結果出現在輸入框,所有當使用者輸入的是非法字元時將會得不到下拉框.Default: false；
matchContains（Boolean）：決定比較時是否要在字串內部檢視匹配,如ba是否與foo bar中的ba匹配.使用快取時比較重要.不要和autofill混用.Default: false；
selectFirst（Boolean）：如果設定成true,在使用者鍵入tab或return鍵時autoComplete下拉列表的第一個值 將被自動選擇,儘管它沒被手工選中(用鍵盤或滑鼠).當然如果使用者選中某個專案,那麼就用使用者選中的值. Default: true；
cacheLength（Number）：快取的長度.即對從資料庫中取到的結果集要快取多少條記錄.設成1為不快取.Default: 10；
matchSubset（Boolean）：autoComplete可不可以使用對伺服器查詢的快取,如果快取對foo的查詢結果,那麼如果使用者 輸入foo就不需要再進行檢索了,直接使用快取.通常是開啟這個選項以減輕伺服器的負擔以提高效能.只會在快取長度大於1時有效.Default: true；
matchCase（Boolean）：比較是否開啟大小寫敏感開關.使用快取時比較重要.如果你理解上一個選項,這個也就不難理解,就好比foot要不要到FOO的快取中去找.Default: false；
multiple（Boolean）：是否允許輸入多個值即多次使用autoComplete以輸入多個值. Default: false；
multipleSeparator（String）：如果是多選時,用來分開各個選擇的字元. Default: ","；
scroll（Boolean）：當結果集大於預設高度時是否使用卷軸顯示 Default: true；
scrollHeight（Number）：自動完成提示的卷軸高度用畫素大小表示 Default: 180；
formatItem（Function）：為每個要顯示的專案使用高階標籤.即對結果中的每一行都會呼叫這個函式,返回值將用LI元素包含顯示在 下拉列表中. Autocompleter會提供三個引數(row, i, max): 返回的結果陣列, 當前處理的行數(即第幾個專案,是從1開始的自然數), 當前結果陣列元素的個數即專案的個數. Default: none, 表示不指定自定義的處理函式,這樣下拉列表中的每一行只包含一個值；
formatMatch（Function）：對每一行資料使用此函式格式化需要查詢的資料格式. 返回值是給內部搜尋演算法使用的. 引數值row i max；
formatResult（Function）：和formatItem類似,但可以將將要輸入到input文字框內的值進行格式化.同樣有三個參 數,和formatItem一樣.Default: none,表示要麼是隻有資料,要麼是使用formatItem提供的值；
extraParams（Object）：為後臺(一般是服務端的指令碼)提供更多的引數.和通常的作法一樣是使用一個鍵值對物件.如果傳過去的值是 { bar:4 },將會被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假設當前使用者輸入了foo). Default: {}；
result （handler） Returns: jQuery：此事件會在使用者選中某一項後觸發，引數為：
event: 事件物件. event.type為result.
data: 選中的資料行.
formatted:formatResult函式返回的值
例如： $("#singleBirdRemote").result(function(event, data, formatted) {
//如選擇後給其他控制元件賦值，觸發別的事件等等
});
一個稍微複雜點的例子：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../css/autocomplete/jquery.autocomplete.css"/>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript">
$(function(){
var emails = [
{ name: "Peter", to: "[email protected]" },
{ name: "Molly", to: "[email protected]" },
{ name: "Forneria", to: "[email protected]" },
{ name: "Master <em>Sync</em>", to: "[email protected]" },
{ name: "Dr. <strong>Tech</strong> de Log", to: "[email protected]" },
{ name: "Don Corleone", to: "[email protected]" },
{ name: "Mc Chick", to: "[email protected]" },
{ name: "Donnie Darko", to: "[email protected]" },
{ name: "Quake The Net", to: "[email protected]" },
{ name: "Dr. Write", to: "[email protected]" },
{ name: "GG Bond", to: "[email protected]" },
{ name: "Zhuzhu Xia", to: "[email protected]" }
];
$("#autocomplete").autocomplete(emails,{
minChars: 0,//自動完成啟用之前填入的最小字元 max:12,//列表條目數 width: 400,//提示的寬度 scrollHeight: 300,//提示的高度 matchContains: true,//是否只要包含文字框裡的就可以 autoFill:false,//自動填充 formatItem: function(data, i, max) {//格式化列表中的條目 row:條目物件,i:當前條目數,max:總條目數return i + '/' + max + ':"' + data.name + '"[' + data.to + ']';
},
formatMatch: function(data, i, max) {//配合formatItem使用，作用在於，由於使用了formatItem，所以條目中的內容有所改變，而我們要匹配的是原始的資料，所以用formatMatch做一個調整，使之匹配原始資料return data.name + data.to;
},
formatResult: function(data) {//定義最終返回的資料，比如我們還是要返回原始資料，而不是formatItem過的資料return data.to;
}
}).result(function(event,data,formatted){
alert(data.to);
});
});
</script>
</head>
<body>
<input type="text" id="autocomplete"/>
</body>
</html> //呼叫後臺Json示例如下 $(function () { $('#job_shop_name').bind("input.autocomplete", function () { $(this).trigger('keydown.autocomplete'); }); $("#job_shop_name").autocomplete("Service/ServiceBroker.ashx",//資料處理的頁面地址或url地址 { width: 200, max: 20, scrollHeight: 300, matchCase: false, dataType: "json",//資料格式 extraParams: { // 傳遞引數方式 action: function () { return "ShopName"}, s: function () {return $.trim($("#job_shop_name").val()) } }, parse: function (data) { if (!data || data == null || data == "") { IntroducerClear(); alert("系統中無相關部門或分店"); return {}; } else { return $.map(data.items, function (row) { return { data: row, value: row.id, result: row.name }; }); } }, formatItem: function (item) { return "<font color=green>" + item.name + "</font>";//提示的內容顯示內容及格式設定 } }).result(function (event, data, formatted) { //選擇提示內容後，觸發的事件或操作(若無,可以不要此節) $('#IntroducerShop').val(data.id); LoadIntroducer(); });
中文支援：
在對中文輸入法開啟時，firefox3.0中是對中文拼音的自動匹配，而對輸入後的中文無法及時觸發匹配；而在我的IE6.0下，則無此問題。
原因分析：
Autocomplete外掛對使用者輸入字元的觸發自動匹配是通過”keydown”事件進行的（可分析 jquery.autocomplete.js第92行），在IE6中，當輸入法開啟時，輸入的字元是不會觸發”keydown”的，只有中文輸入完畢才 觸發之，所以中文輸入和latin文沒有區別的；但在firefox3.0下，無論輸入法開啟否，按鍵都會觸發”keydown”事件，所以造成中文輸入 完畢，自動匹配的是剛才打出的部分中文拼音字母。
解決方法：
網上查到的最多做法是修改jquery.autocomplete.js第92行，將”keydown”替換為”keyup”， 但這個不是根本辦法，雖然這樣改後可在firefox中及時對輸入的中文進行自動匹配，但將原外掛中回車、tab等重要的事件機制破壞了，比如這樣改後， 如果你的input是在一個form裡的話，回車從原來的將選定項輸入到input中變為了直接提交form表單了，這並不是我們想要的。
我的方法原理是，補充一個原外掛觸發查詢的事件，就是當input輸入欄發生字元變化時，重新進行查詢（呼叫其內部的onChange函式），這裡 主要針對firefox而言，因為我們的系統訪問最多的是IE和firefox。而恰好firefox有一個input變化的事件就是oninput，那麼我們只要在原jquery.autocomplete.js第199行（即$input.bind方法的末尾），插入如下程式碼：
.bind("input", function() {
onChange(0, true);
})
相關推薦
Jquery autocomplete外掛的使用示例
簡單用法： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//D
jquery.rotate外掛實現轉盤抽獎示例
css程式碼：.draw-out{width:400px;height:400px;margin:30px auto;position:relative} .draw-bottom{width:400px;height:400px;position:relative}
使用jQuery Autocomplete(自動完成)外掛,結合ajax實現搜尋框匹配
要實現如圖所示效果，通過ajax,和Autocomplete完成匹配，整了好久，做一下記錄。 先分析各個引數的作用： 我們需要在html程式碼中引入jQuery UI的js檔案和css檔案，由於jQuery UI是依賴於jQuery的，因此我們還需要在引入jQuery
zTree：JQuery樹形外掛使用示例
最近在做一個Web平臺，其中想用一個樹形展示。上網搜了搜基於JQuery的樹形外掛還真不少，最後選定zTree。關於zTree這裡只是簡單給出一個使用的示例。 首先宣告zTree的配置資訊，然後宣告z
jquery-autocomplete 參數說明
有效 har ole 格式 指定 ctf 手工 bsp put 轉http://www.cnblogs.com/dongqi/archive/2010/04/06/1705510.html * minChars (Number): 在觸發autoComplete前用
jq裏驗證插件的自定義方法Jquery.validator.addMethod()示例
placement ans rem 提示 .html orm turn comm char 最近寫驗證的時候感覺原生的驗證謝了一遍又一遍，就想到了“不要重復造輪子，學會管理自己的工具庫”這句名言，於是嘗試用jq的validator。 用過又發現需要自定義方法去驗證，於是去
easyui跟Jquery autocomplete沖突問題
jquer let src 沖突 com png 技術 alt blog 正確的引用順序 如果引用如下：則會報錯 easyui跟Jquery autocomplete沖突問題
jQuery AutoComplete演示
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Default functionality</title
jquery.autocomplete.js 使用備忘
涉及專案： tms 參考文章：有關 Autocomplete的使用 ， jQuery.Autocomplete 中文支援 具體情況：支援中文過濾，支援內部匹配； 當無符合匹配條件的內容時，應當給出提示（TODO） //自動補全 教師/僱員 資訊時的初始
jquery開發外掛
1.jQuery.extend(object);為擴充套件jQuery類本身.為類新增新的方法。 2.jQuery.fn.extend(object);給jQuery物件新增方法。 jQuery便是一個封裝得非常好的'類'，比如我們用 語句$("#div1")會生成一個 jQuery
jQuery列印外掛JQPRINT
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
jquery.validate 外掛使用
jQuery.validate外掛是一個簡單易用的外掛，主要作用是在表單提交前進行相關輸入專案的有效性 驗證，驗證通過提交表單，否則提示錯誤；但需要特別注意的是，凡是需要採用該外掛驗證的表單項，均需要定義html的name屬性資訊，且和id值的定義一致，才能達到有效性驗證目的 //=======
jQuery-ui外掛datepicker的引數使用詳解
轉載：https://blog.csdn.net/hliq5399/article/details/22406989 概述 日期選擇外掛是一個配置靈活的外掛，你可以定義它的展示方式，包括日期格式、語言、限制選擇日期範圍、新增相關按鈕以及其它導航等。
基於jQuery日曆外掛製作日曆
這篇文章主要介紹了基於jQuery日曆外掛製作日曆的相關資料,需要的朋友可以參考下 來看下最終效果圖吧： 是長得醜了一點，不要吐槽我-。- 首先來說說這個日曆主要的製作邏輯吧： ·一個月份最多有31天，需要一個7X6的表格去裝載 ·如果知道了某個月份1號是星期幾，這個月份有多少天，一個迴圈就可以顯示某個月的
lightslider-支援移動觸控的輕量級jQuery幻燈片外掛
外掛簡介 lightslider是一款輕量級的響應式jQuery幻燈片外掛。lightslider幻燈片外掛能夠支援移動觸控裝置，它可以製作為帶縮圖的內容幻燈片，或者製作為無限迴圈的旋轉木馬。它的特點還有： 下載地址 線上演示 下載地址：http://www.jqhtml.com/5633.html
jQuery幻燈片外掛Owl Carousel外掛
簡介 Owl Carousel 是一個強大、實用但小巧的 jQuery 幻燈片外掛，它具有一下特點： 相容所有瀏覽器 支援響應式 支援 CSS3 過度 支援觸控事件 支援 JSON 及自定義 JSON 格式 支援進度條 支援自定義事件
使用jquery.form外掛的方法
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body&
jQuery validate外掛做正整數表單驗證
jQuery validate外掛為表單提供了強大的表單驗證功能。 詳細參考菜鳥教程： http://www.runoob.com/jquery/jquery-plugin-validate.html 下面是js表單驗證正整數的例子： //自定義校驗，正整數 jQuery.vali
jquery 簡易外掛 非同步form提交、檔案非同步提交，jquery 檔案非同步提交
$.ajax 預設不支援檔案提交， 這裡提供一個form target = iframe 的非同步提交外掛 如果需要提交檔案form 需要設定屬性 enctype="multipart/form-data"，使用外掛後會自動使用target =&nb
Jquery時間外掛
使用一個閉包自執行函式編寫外掛，傳入JQuery物件。 (function($){ $.fn.extend({ clock:function(options){ var defaults = {height:'50px',width:'13