Page 1 of 1

How to get the jquery auto complete based on the first lette

Posted: Mon Feb 22, 2016 12:32 am
by sathya
Hi All,

When some one type in text box the auto suggest showing all the results but i dont want like that.

i want like this:

when some one searches An or Ac like that then ActionScript (Anushka) should come to the auto suggest list based on the starting letter min 2 character and it should not display all the tags which contains the An

here is my below code i have tried so far,kindly help me to resolve it

Code: Select all

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    var availableTags = [
      "ActionScript (Anushka)",
      "AppleScript (Ananth)",
      "Asp (Gopal)",
      "BASIC (Bharath)",
      "C (Charles)",
     
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>
Thanks for reading this and kindly help me to solve the problem

Re: How to get the jquery auto complete based on the first l

Posted: Mon Feb 22, 2016 12:48 am
by requinix
source

Use a function for the source, instead of using the availableTags directly. That function looks for matches according to whatever you want. For example,

Code: Select all

function(request, response) {
	// array of matching results
	var results = [];

	// search regex: tag must begin with the request.term
	var re = new RegExp("^" + jQuery.ui.autocomplete.escapeRegex(request.term), "i");

	// find each tag that matches the regex and add to the results array
	for (var i = 0; i < availableTags.length; i++) {
		if (re.test(availableTags[i])) {
			results.push(availableTags[i]);
		}
	}

	// send the results back to autocomplete
	response(results);
}

Re: How to get the jquery auto complete based on the first l

Posted: Mon Feb 22, 2016 1:02 am
by sathya
yes this what i expected..i will give a try

Re: How to get the jquery auto complete based on the first l

Posted: Mon Feb 22, 2016 2:24 am
by sathya
Hi requinix,
var results=[
"ActionScript (Anushka)",
"AppleScript (Ananth)",
"Asp (Gopal)",
"BASIC (Bharath)",
"C (Charles)",

];

i have to post the array values inside the results here then whats the purpose of available tags here ..can you pls explain bro?

Re: How to get the jquery auto complete based on the first l

Posted: Mon Feb 22, 2016 4:28 am
by requinix
Leave the tags in the availableTags array. Leave results an the empty array. Don't touch anything in that code I posted (unless there is an actual problem with it). Just try it as the callback for the "success" option.

Re: How to get the jquery auto complete based on the first l

Posted: Mon Feb 22, 2016 4:35 am
by sathya
okay thanks bro