Javascript 组件:输入框自动提示
Published in
3 min readFeb 27, 2014
功能
根据输入的内容框请求数据,并将结果显示在下拉列表中。演示 | Github
截图
用法
var suggest = AutoSuggest({
// 容器的 id 或 class
container: '.suggest-container',
// 输入框的 id 或 class 或 jQuery object
id: 'stock',
// 输入几个字符的时候触发请求
minInputLen: 2,
// 列表一次显示的最大条目数
row: 10,
// 请求的地址,{%input%} 是用户输入的字符
url: 'http://suggest3.sinajs.cn/suggest/?name=info&key={%input%}',
// 请求的方式,对应 jQuery 的 script 或 json
dataType: 'script',
/**
* 当用户选中一个列表项时进行的操作
* @param {string} value 用户选定项的值,如果没有指定该值,则同该项显示的内容
*/
pick: function(value) {
alert('你选择了' + value);
},
/**
* 获取到数据后对数据进行过滤及格式化处理
* @param {string} inputValue 用户当前输入的字符串
* @param {string|json} data 服务器返回的数据
* @return {array} 处理后的传回组件用于显示的数据。数组中可以为 string 或 json。
* 若为 json,display 为显示的值;value 为操作的值。
*/
processData: function(inputValue, data) {
if(window.info) {
var result = [];
var stock_arry;
data = window.info.split(';');
data.forEach(function(stock){
stock_arr = stock.split(',');
if(inputValue.match(/\d+/) !== null) {
match = stock_arr[2];
} else {
match = stock_arr[0];
}
result.push({
'display': match.replace(inputValue, '<strong>' + inputValue + '</strong>') + ', ' + stock_arr[4],
'value': stock_arr[4] + '(' + stock_arr[2] + ')'
});
});
return result;
}
}