CODEWITHSUNDEEP
javascriptjquery
frendos
frendos

Reputation: 55

Autocomplete onclick in jquery

Actually, I have done jquery autocomplete on focus,when I click my textbox it shows focus of all data,so I want if i'm clicking any one data means it redirects to page how will do that.
Something like this: www.practo.com

This is my script:

<script>
$(function() {
$( "#skills" ).autocomplete({
source: 'search.php',
minLength: 0,
scroll: true
 }).focus(function() {
            $(this).autocomplete("search", "");
        });
});
</script>

Upvotes: 3

Views: 4257

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

You can use jQuery UI autocomplete select(event, ui) to enable redirection after user selects an item. See demo below:

var sample_skills = [
      "jquery",
      "java"
    ];

$(function() {
	$( "#skills" ).autocomplete({
		source: sample_skills,
		minLength: 0,
		scroll: true,
		select: function(event, ui) {   
			console.log(ui.item.value);
			if(ui.item.value == "jquery"){
			    location.href="https://api.jquery.com/";
			} else if (ui.item.value == "java"){
			    location.href="https://www.w3schools.in/java-tutorial/intro/";
			}
		}
	}).focus(function() {
		$(this).autocomplete("search", "");
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>
  
  <input type="text" id="skills">

Upvotes: 1

Related Questions