Thursday, 21 May 2015

Auto Suggest Java Script File


Most of the Web Designers are really suffering to find an easy way to input javascript tools into their pages. One of the best tool is the auto suggestion like we see in google search box which automatically display matching items that may be what we are searching for. Most of the script files found today are very difficult to understand and use. So I've created a Javascript file to help you achieve the autosuggestion very easily. In this Javascript method the suggestion are added as items in a list. You can apply css style to it to customize and make it better.

The basic syntax is very simple:

 autoSuggest(input_selector,list_id,max_suggestion,data_array);
  • input_selector: selector for the input type to which autosuggest is to be enabled.
  • list_id : id of the list which holds suggestions.
  • max_suggestion: maximum no. of suggestions to appear.
  • data_array: The array which holds the suggestions.

Note:The data_array takes the value 'default' and the suggestion are taken from an inbuilt dictionary.

Example:

Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="autoSuggest.js"></script>
<script>
 ARR = ['apple','ball','cup','dog','engine','food','ginger','hook','ink','joker','kite'];
 autoSuggest('#sText','autoC',10,ARR);
</script>
</head>

<body>
<input id='sText' type='search'/>
<ul id='autoC'>
 <li><a>Hai</a></li>
</ul>
</body>
</html>

Output:

Download the file :
Download

Link to your website using the code snippet: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="https://googledrive.com/host/0B9LZUJ9ROeSrb2VCUHpqNk9SY1E" type="text/javascript"></script>