drew wilson jquery autocomplete / autosuggest plugin
jquery autocomplete / autosuggest plugins provides list of suggestions when we type in text fields.
When i searched for an autocomplete plugin i found drew wilson auto complete plugin. I'm very impressed with this plugin because it has clear and simple styles for tags, good performance with cached results etc... So i would like to share some of its features hoping someone find it useful.
This autocomplete supports ajax based loading,prefill options. So suggestions can be loaded dynamically from database and it looks like the one below:
How to use
Load required js files and css
This examples initiates autocomplete pulgin for the input "basic"
However i needed some extra support in this plugin as there is issue in deleting selected tags and removing special characters. I fixed those issues and you can download from below link.
When i searched for an autocomplete plugin i found drew wilson auto complete plugin. I'm very impressed with this plugin because it has clear and simple styles for tags, good performance with cached results etc... So i would like to share some of its features hoping someone find it useful.
This autocomplete supports ajax based loading,prefill options. So suggestions can be loaded dynamically from database and it looks like the one below:
How to use
Load required js files and css
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.autoSuggest.min.js"></script>
<link rel="stylesheet" href="autoSuggest.min.css" type="text/css" media="screen" />
<script src="jquery.autoSuggest.min.js"></script>
<link rel="stylesheet" href="autoSuggest.min.css" type="text/css" media="screen" />
This examples initiates autocomplete pulgin for the input "basic"
<input type="text" id="basic" name="basic" />
<script type="text/javascript">
$(document).ready( function(){
var data={"items":[{"id":"19","tag":"PHP"},{"id":"3","tag":"Apache"},{"id":"16","tag":"Firefox Tweeks"},{"id":"17","tag":"Shortcuts"},{"id":"20","tag":"Others"},{"id":"21","tag":"CSS"},{"id":"22","tag":"Javascript"},{"id":"23","tag":"DNS"},{"id":"24","tag":"Windows"},{"id":"27","tag":"Websites"},{"id":"31","tag":"Linux"},{"id":"32","tag":"Game programming"},{"id":"45","tag":"MS Office"}]};
$("#basic").autoSuggest(data.items, {selectedItemProp: "tag", searchObjProps: "tag", selectedValuesProp: "id", startText: "", keyDelay: 50, minChars: 1,asHtmlID: "basic" });
});
</script>
<script type="text/javascript">
$(document).ready( function(){
var data={"items":[{"id":"19","tag":"PHP"},{"id":"3","tag":"Apache"},{"id":"16","tag":"Firefox Tweeks"},{"id":"17","tag":"Shortcuts"},{"id":"20","tag":"Others"},{"id":"21","tag":"CSS"},{"id":"22","tag":"Javascript"},{"id":"23","tag":"DNS"},{"id":"24","tag":"Windows"},{"id":"27","tag":"Websites"},{"id":"31","tag":"Linux"},{"id":"32","tag":"Game programming"},{"id":"45","tag":"MS Office"}]};
$("#basic").autoSuggest(data.items, {selectedItemProp: "tag", searchObjProps: "tag", selectedValuesProp: "id", startText: "", keyDelay: 50, minChars: 1,asHtmlID: "basic" });
});
</script>
However i needed some extra support in this plugin as there is issue in deleting selected tags and removing special characters. I fixed those issues and you can download from below link.
Comments (0)