jquery-input-match是一個JQuery的插件用于處理根據input輸入框內容實時顯示與之匹配的數據條目
jquery-input-match
jquery-input-match是一個JQuery的插件用于處理根據input輸入框內容實時顯示與之匹配的數據條目
- 提供定制皮膚的方式
- 待匹配的數據可以是靜態數據也可以是異步從服務器請求的數據
- 豐富的參數滿足所有的需求 </ul>
使用說明
前端 HTML示例
<html>
<head>
<title>輸入框自動提示</title>
<meta charset="utf-8">
<script type="text/javascript" src="../jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../jquery-input-match.min.js"></script>
</head>
<body>
<input type="text" style="margin-top:100px;margin-left:500px;" name="a" class="input"/>
<input type="text" style="margin-top:100px;margin-left:600px;" name="b" class="input"/>
<script type="text/javascript">
//異步請求的數據作為待匹配的數據
$(".input").eq(0).inputMatch({
url:"demo.php",
timeout:500,
selectCallback:'demo',
mustSelect:false,
asParam:true,
paramName:'x',
});
//靜態數據作為待匹配的數據
$(".input").eq(1).inputMatch({
data:[
{value:1,text:'sfs'},
{value:1,text:'明天dfgd啊實asdaadasdada打實大'},
{value:1,text:'dgadfgddas'},
{value:1,text:'qeg'},
{value:1,text:'sfddfdad'},
{value:1,text:'sfddfdad'},
{value:1,text:'xbgg'},
{value:1,text:'yudfgdghf'},
{value:1,text:'cnsdffs'},
{value:1,text:'rgdgdf'},
{value:1,text:'iokjdfgdkhj'},
{value:1,text:'qwqdfdada'},
{value:1,text:'ujmgng'},
{value:1,text:'cbfdfgdghn'},
],
timeout:500,
selectCallback:'demo',
mustSelect:false,
filter:true,
matchOnFocus:true,
fillRightNow:false,
});
//選擇數據條目后的回調函數
function demo(value,text){
alert("您選中了"+text);
}
</script>
</body>
</html> 后端 PHP示例 (demo.php)
<?php
$arr=array(
array('value'=>12,'text'=>'qwer'),
array('value'=>123,'text'=>'abcdefg'),
array('value'=>142,'text'=>'adadfgrt5tdada'),
array('value'=>162,'text'=>'adadagjdgsfsda'),
);
echo json_encode($arr);
?>參數說明
| 參數名稱 | 參數值 |
|---|---|
| skin | 皮膚，默認default |
| data | 待匹配的靜態數據 |
| url | 獲取待匹配數據數據的地址 (data和url兩個參數二選一，當兩個參數同時傳入時只處理data的數據) |
| asParam | 輸入內容是否作為url參數:true,false 默認false (與url參數一同傳入時才生效) |
| paramName | 參數名 (與asParam參數一同傳入時才生效) |
| repeatRequest | 相同url是否重復請求服務器:true,false 默認false (與url參數一同傳入時才生效) |
| timeout | 停止輸入后多久從服務器拉取數據 (單位毫秒 默認300) |
| showOnFocus | 輸入框獲得焦點時是否觸發顯示數據列表:true,false 默認false |
| match | 數據列表是否只顯示與輸入內容相匹配的條目:true,false 默認true |
| mustSelect | 輸入框的值是否必須從數據列表中選擇:true,false 默認false |
| maxLength | 數據列表的最大顯示長度 (默認15,0則顯示全部) |
| fillRightNow | 鼠標或上下鍵在數據列表上移動時輸入框是否實時顯示 |
| selectCallback | 選擇數據時的回調函數 (默認空) |
提示
- 當input控件在表單內，使用上下鍵選擇數據后回車選中時，會阻止表單提交的默認行為，如需在選中后提交表單請在回調函數中處理
- 含特殊符的數據請處理后傳入 如 ' " < > 等
- 參數data或服務器返回的數據(json)的格式
[
{value:1,text:'第一名'},
{value:2,text:'第二名'},
{value:3,text:'第三名'}
]皮膚制作指南
- themes文件夾內新建css文件 styleName.css
- styleName.css的格式如下
@CHARSET "UTF-8";
#styleName-input-match-box{
//your style
}
#styleName-input-match-box li{
//your style
}
#styleName-input-match-box li.on{
//your style
}- 傳入皮膚參數 {skin:styleName}
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！