jQuery插件JSON Suggest Box实现Javascript自定义获取JSON数据下拉提示框

表单常常是与用户交互的最前线，不管是注册，登陆等等，都离不开表单，如何有效的吸引用户，让用户更粘 一直是网络产品设计的重点，这里介绍一个jQuery插件JSON Suggest Box下拉提示框，实现当用户在文本框输入内容时通过获取JSON数据下拉框提示或建议，类似GOOGLE的下拉功能，当前这个插件没有那么强大，提示一 些信息量小，但非常实用的内容(suggest就是建议的意思)，如国家，地区，网址等等，效果图如下：

使用说明
需要使用jQuery库文件和JSON Suggest Box下拉提示框库文件

使用实例(下拉网址提示功能)

一，包含文件部分

1. <script language=”JavaScript” src=”jquery-1.3.2.min.js”></script>
2. <script language=”JavaScript” src=”jquery.jsonSuggest.js”></script>
3. <script language=”JavaScript” src=”testData/testData.js”></script>

如上包含三个文件，testData.js是JSON数据文件。

二，HTML部分

1. <input type=”text” size=”50″ id=”suggestBox2″ />

三，Javascript部分

1. $(‘input#suggestBox’).jsonSuggest(testData.webSites, {onSelect:callback});

testData.webSites表示读取testData.js文件中的JSON数据(具体大家可以查看JS文件)。

使用非常简单，同时还有以下几种功能

1，获取远程JSON数据下拉提示框功能

1. $.getJSON(“http://www.biuuu.com/test.txt”,
2. function(data){
3. $(‘input#suggestBox3′).jsonSuggest(data, {maxResults:20});
4. }
5. );

2，自定义JSON数据下拉提示框功能

1. $(‘input#suggestBox4′).jsonSuggest(
2. function(text, wildCard, caseSensitive, notCharacter) {
3. return [
4. {text:'View'},
5. {text:'the'},
6. {text:'source'},
7. {text:'for'},
8. {text:'this'},
9. {text:'one'}
10. ];
11. }, {ajaxResults:true});

其中JSON Suggest Box参数如下：

minCharacters表示最小字符，默认为1，达到这个字符数才开始下拉提示
maxResults表示最大结果，默认为undefine，表示无限制
wildCard表示配符，默认为空
caseSensitive表示区分大小写，默认为false
notCharacter表示排除某字符，默认为空，就是除这些字符外
maxHeight表示下拉提示框最大高度，默认350
highlightMatches表示高亮匹配
onSelect表示选中，当点击下拉中的内容后触发的事件
ajaxResults表示ajax结果

使用非常简单，JSON Suggest Box实现Javascript自定义获取JSON数据下拉提示框可实现很多非常有趣的应用，值得推荐。

点我查看jQuery插件JSON Suggest Box实现Javascript自定义获取JSON数据下拉提示框在线演示