- 浏览: 400192 次
- 性别:
- 来自: 南京
文章分类
最新评论
-
qiuqinjun:
你好,项目的文献能否打包学习下呢
java定时任务管理实现 -
panghaoyu:
实现一个智能提示功能需要ajax、数据库、jsp/php、算法 ...
使用jQuery Autocomplete(自动完成)插件 -
CommonAccount:
我的showModalDialog() 传对象参数,在子窗口用 ...
JS中showModalDialog (模态窗口)详细使用 -
wyfn18:
very good
使用jQuery Autocomplete(自动完成)插件 -
jiangqingtian:
xiexie
使用jQuery Autocomplete(自动完成)插件
How It Works
AutoSuggest will turn any regular text input
box into a rad auto-complete box. It will dynamically create all the HTML elements that it needs to function. You don't need to add any extra HTML to work with AutoSuggest. Also, AutoSuggest uses ZERO images! All styling is done 100% in the included CSS file. This means it is super easy to customize the look of everything! You only need to edit the included CSS file. You can even use images if you want, just add the appropriate lines of code into the CSS file.
As you type into the AutoSuggest input
box, it will filter through it's Data and "suggest" matched Data items to you. You can pass in an Object of Data toAutoSuggest or you can have it call a URL as you type to get it's Data from.AutoSuggest will display the matched Data items in a selectable list, which is 100% customizable. You have the option of structuring the HTML elements of that list however you want via the formatList
callback function. You case an example of this in the second example above.
When you type into the input
box and the "suggestion" dropdown list appears, a few things happen:
- A
class
of "loading" is applied to the main AutoSuggestul
while the data is loaded. That class is then removed when all processing has finished and before the suggestion results list is made visible. - As you hover over each suggested option in the list a
class
of "selected" is added to that item, and then removed when youmouseout
. - When you make a selection the item is added to the
input
box. Also there is a hiddeninput
field generated for each AutoSuggest box that stores the values (comma separated) of each item you have selected. This input box will have a unique ID as well as a class name of "as-values".
The plugin expects the Data passed into it (or gathered from the URL) to be formatted in JSON. JSON is an extremely easy format to work with, and if you don't already... you should :) To learn more about JSON, check out my post/video, An Introduction to JSON.
When an AJAX request is made the search string is sent over in a param named "q" by default. However you can change that name with the queryParam option. Here is a default example AJAX request: http://www.mysite.com/your/script/?q=mick
"mick" would be the search query that was typed into the input
box. Be sure to setup your server-side code to grab that param and send back some results.
As of AutoSuggest version 1.4 you can now create selections by using the tab orcomma keys. To do this simply type something into the box and hit the tab orcomma keys. The selection is added to AutoSuggest in the exact same manner as if it were chosen from the Results dropdown.
AutoSuggest has been tested (and works) in: IE7 & IE8, Firefox, Safari, Opera, and Chrome.
How To Use It
Obviously you need to make sure you have the latest jQuery library (at least 1.3) already loaded in your page. After that it's really simple, just add the following code to your page (make sure to wrap your code in jQuery's ready function):
$(
function
(){
$(
"input[type=text]"
).autoSuggest(data);
});
The above line of code will apply AutoSuggest to all text type input
elements on the page. Each one will be using the same set of Data. If you want to have multipleAutoSuggest fields on your page that use different sets of Data, make sure you select them separately. Like this:
$(
function
(){
$(
"div.someClass input"
).autoSuggest(data);
$(
"#someID input"
).autoSuggest(other_data);
});
Doing the above will allow you to pass in different options and different Data sets.
Below is an example of using AutoSuggest with a Data Object and other various options:
var
data = {items: [
{value:
"21"
, name:
"Mick Jagger"
},
{value:
"43"
, name:
"Johnny Storm"
},
{value:
"46"
, name:
"Richard Hatch"
},
{value:
"54"
, name:
"Kelly Slater"
},
{value:
"55"
, name:
"Rudy Hamilton"
},
{value:
"79"
, name:
"Michael Jordan"
}
]};
$(
"input[type=text]"
).autoSuggest(data.items, {selectedItemProp:
"name"
, searchObjProps:
"name"
});
Below is an example using a URL to gather the Data Object and other various options:
$(
"input[type=text]"
).autoSuggest(
"http://mysite.com/path/to/script"
, {minChars: 2, matchCase:
true
});
Please not that you MUST have an object property of "value" for each data item. (This is now configureable with the selectedValuesProp
option). The "value" property will be stored (comma separated) in the hidden input
field when chosen from the "suggestion" dropdown list. You can see an example of the "value" property being set for each data item in the example above. Typically the "value" property would contain the ID of the item, so you can send a list of "chosen" IDs to your server.
Below is an example of how to process the data sent via AJAX to your server in PHP:
<?
$input
=
$_GET
[
"q"
];
$data
=
array
();
// query your DataBase here looking for a match to $input
$query
= mysql_query(
"SELECT * FROM my_table WHERE my_field LIKE '%$input%'"
);
while
(
$row
= mysql_fetch_assoc(
$query
)) {
$json
=
array
();
$json
[
'value'
] =
$row
[
'id'
];
$json
[
'name'
] =
$row
[
'username'
];
$json
[
'image'
] =
$row
[
'user_photo'
];
$data
[] =
$json
;
}
header(
"Content-type: application/json"
);
echo
json_encode(
$data
);
?>
Options
- asHtmlID: string (false by default) - Enables you to specify your own custom ID that will be appended to the top level AutoSuggest UL element's ID name. Otherwise it will default to using a random ID. Example: id="CUSTOM_ID". This is also applies to the hidden input filed that holds all of the selected values. Example: id="as-values-CUSTOM_ID"
- startText: string ("Enter Name Here" by default) - Text to display when the AutoSuggest input field is empty.
- emptyText: string ("No Results" by default) - Text to display when their are no search results.
-
preFill: object or string (empty object by default) - Enables you to pre-fill the AutoSuggest box with selections when the page is first loaded. You can pass in a comma separated list of values (a string), or an object. When using a string, each value is used as both the display text on the selected item and for it's value. When using an object, the options
selectedItemProp
will define the object property to use for the display text andselectedValuesProp
will define the object property to use for the value for the selected item. Note: you must setup your preFill object in that format. A preFill object can look just like the example objects laid out above. - limitText: string ("No More Selections Are Allowed" by default) - Text to display when the number of selections has reached it's limit.
- selectedItemProp: string ("value" by default) - Name of object property to use as the display text for each chosen item.
- selectedValuesProp: string ("value" by default) - Name of object property to use as the value for each chosen item. This value will be stored into the hidden input field.
- searchObjProps: string ("value" by default) - Comma separated list of object property names. The values in these objects properties will be used as the text to perform the search on.
- queryParam: string ("q" by default) - The name of the param that will hold the search string value in the AJAX request.
- retrieveLimit: number (false by default) - If set to a number, it will add a '&limit=' param to the AJAX request. It also limits the number of search results allowed to be displayed in the results dropdown box.
- extraParams: string ("" by default) - This will be added onto the end of the AJAX request URL. Make sure you add an '&' before each param.
- matchCase: true or false (false by default) - Make the search case sensitive when set to true.
- minChars: number (1 by default) - Minimum number of characters that must be entered into the AutoSuggest input field before the search begins.
- keyDelay: number (400 by default) - Number of milliseconds to delay after a keydown on the AutoSuggest input field and before search is started.
- resultsHighlight: true or false (true by default) - Option to choose whether or not to highlight the matched text in each result item.
- neverSubmit: true or false (false by default) - If set to true this option will never allow the 'return' key to submit the form that AutoSuggest is a part of.
- selectionLimit: number (false by default) - Limits the number of selections that are allowed to be made to the number specified.
- showResultList: true or false (true by default) - If set to false, the Results Dropdown List will never be shown at any time.
- start: callback function - Custom function that is run only once on each AutoSuggest field when the code is first applied.
-
selectionClick: callback function - Custom function that is run when a previously chosen item is clicked. The item that is clicked is passed into this callback function as 'elem'.
Example:selectionClick: function(elem){ elem.fadeTo("slow", 0.33); }
-
selectionAdded: callback function - Custom function that is run when a selection is made by choosing one from the Results dropdown, or by using the tab/comma keys to add one. The selection item is passed into this callback function as 'elem'.
Example:selectionAdded: function(elem){ elem.fadeTo("slow", 0.33); }
-
selectionRemoved: callback function - Custom function that is run when a selection removed from the AutoSuggest by using the delete key or by clicking the "x" inside the selection. The selection item is passed into this callback function as 'elem'.
Example:selectionRemoved: function(elem){ elem.fadeTo("fast", 0, function(){ elem.remove(); }); }
- formatList: callback function - Custom function that is run after all the data has been retrieved and before the results are put into the suggestion results list. This is here so you can modify what & how things show up in the suggestion results list.
-
beforeRetrieve: callback function - Custom function that is run right before the AJAX request is made, or before the local objected is searched. This is used to modify the search string before it is processed. So if a user entered "jim" into the AutoSuggest box, you can call this function to prepend their query with "guy_". Making the final query = "guy_jim". The search query is passed into this function. Example:
beforeRetrieve: function(string){ return string; }
-
retrieveComplete: callback function - Custom function that is run after the ajax request has completed. The data object MUST be returned if this is used. Example:
retrieveComplete: function(data){ return data; }
-
resultClick: callback function - Custom function that is run when a search result item is clicked. The data from the item that is clicked is passed into this callback function as 'data'.
Example:resultClick: function(data){ console.log(data); }
- resultsComplete: callback function - Custom function that is run when the suggestion results dropdown list is made visible. Will run after every search query.
The formatList option will hand you 2 objects:
- data: This is the data you originally passed into AutoSuggest (or retrieved via an AJAX request)
-
elem: This is the HTML element you will be formatting (the 'result'
li
item).
In order to add extra things to the 'result' item (like an image) you will need to make sure you pass that data into AutoSuggest.
Below is an example of formatList in action:
formatList:
function
(data, elem){
var
my_image = data.image;
var
new_elem = elem.html(
"add/change stuff here, put image here, etc."
);
return
new_elem;
}
You MUST return the HTML object. formatList will run on each 'result' item.
- autoSuggestv14.zip (12.2 KB)
- 下载次数: 32
发表评论
-
jQuery实现Session过期提示
2013-06-24 15:46 10632起初项目中session过期的时候需要做一个提示框(并不进 ... -
页面所有元素加载完成之后执行某个js函数
2013-06-08 12:35 95981在页面所有元素加载完成之后执行某个js函数 做项目 ... -
在页面加载完后执行javascript代码
2013-06-04 15:54 0在页面加载完后执行javascript代码 ... -
基于jQuery的waterfall(瀑布流)布局
2013-05-21 15:44 5126<!DOCTYPE html> < ... -
如何提高你的jQuery代码技巧
2013-05-17 21:37 0Query之所以如此流行并被从大公司到个人博客的几乎每个人都 ... -
使用jQuery去掉指定标签里所有文字内容对应的链接
2013-05-21 15:43 1210有时候需要使用jQuery来去除指定的某些标签,例如,删除所有 ... -
Jquery的UI库 w2ui
2013-05-10 16:52 5099很不错的Jquery的UI库 w2ui,基于Jquery的 ... -
Javascript动态生成table的性能调优
2013-05-08 10:08 0客户端动态输出table数 ... -
经典的回到页面顶端
2013-04-25 13:54 1775经典的回到页面顶端,当页面滚动到一定的高度时,给一个回到顶 ... -
jQuery/javascript实现IP/Mask自动联想功能
2013-02-01 16:02 3443之前做一个云计算的项目,涉及到一个安全组自动联想的功能,思想是 ... -
js 验证各种格式类型的正则表达式
2013-01-31 14:59 0<script src="scripts/ ... -
amCharts目前最牛逼的图表插件
2012-12-05 23:40 0amCharts,图表插件,目前最牛的图表插件 -
判断几种浏览器类型的表达式
2012-12-03 14:11 1009// IE浏览器 if (/MSIE/.test(n ... -
js获取工程路径以及js调用Servlet
2012-10-18 21:19 0function getRootPath(){ va ... -
jQuery jqplot chart plugins
2012-09-28 00:31 0Charts on this page may depe ... -
jQuery tip plugins
2012-09-25 00:35 01. 一款jQuery提示插件 2. 以下为一个java ... -
使用jQuery Autocomplete(自动完成)插件
2012-09-18 01:25 26358jQuery 的Autocomplete(自动完成、自动 ... -
动态创建js,jQuery
2012-09-18 00:53 0function checkJquery() { ... -
jQuery ajax - getJSON() 方法
2012-09-17 22:41 0<html> <head> ... -
仿IBM导航条实现
2012-09-16 22:57 0<!DOCTYPE html PUBLIC " ...
相关推荐
Jquery autocomplete 模糊搜索 模仿Google 百度,虽然说还是有些问题,不过已经很好了,使用.NET 与后台进行交互
jquery-autosuggest, Drew Wilson fork 插件writtern的 jQuery插件Drew Wilson fork 插件writtern的。http://code.drewwilson.com/entry/autosuggest-jquery-plugin工作原理自动 AutoSuggest A
autosuggest
AUTOSUGGEST js 文件 ,模仿google sugguest编写的ajax 获取下拉列表程序
前端项目-react-autosuggest,符合WAI-ARIA的react autosuggest组件
类似于google网站的自动提示功能,自动提示下拉列表框原始文件地址:http://www.cssrain.cn/article.asp?id=106,我对原始功能进行小小的修改。修改功能如下: 1.可以在一个页面中同时显示多个下拉列表框,带自动提示...
一、漏洞简介 二、漏洞影响 三、复现过程 四、参考链接
原型.autoSuggest Prototype 的 AutoSuggest 插件,从 Drew Wilson 的 jQuery 插件移植而来 ( )
Vue Autosuggest 一个很棒的 Vue.js 自动提示组件
jQuery-multiAutocomplete 一个jQuery插件,允许一个输入中多个自动完成功能。 用其他语言阅读:。 示范 兼容性 jQuery-multiAutocomplete已在主要浏览器上与jQuery 1.7+一起测试: ...autosuggest true 它允许实时
TagDragon - jQuery Autosuggest 插件 注意:TagDragon 曾经是一个强制性的捐赠软件 jQuery 插件。 截至目前,它是免费的,捐赠给社区使用、分叉和改进。 原作者的支持是有限的。 随意使用。 ####Introduction ...
Using and Developing an AutoSuggest ASP.NET Server Control Library
React自动建议项目状态寻找维护者! 不幸的是,我没有时间再维护这个项目...(例如,占位符,类型, , 或任何其他),或(用于与其他库集成) 经过全面测试安装yarn add react-autosuggest 要么npm install react-aut
用作网页无数新技术,里面是js脚本
Bing Maps Autosuggest API示例 此存储库包含几个利用新的服务的Javascript示例:Autosuggest API。 网上订购表格的自动建议地址 显示了如何使用Autosuggest API仅使用部分地址查询和客户位置来自动完成电子商务订购...
使用php,jquery和mysql的简单自动建议示例 跟随演示: :
自动建议 这个jquery插件将根据您在文本字段中提供的文本生成建议基础。