CODEWITHSUNDEEP
jqueryautocomplete
user2469885
user2469885

Reputation: 43

How to get jquery autocomplete values to search?

The autocomplete part works, but clicking on the values in the drop down just puts them into the search box, and then I have to hit enter to perform the search. How do I get the values to search? 

<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">


<script>
  $(function() {
    var availableTags = [
      "SEO",
      "Responsive Design",
      "Google Local",
      "Twitter",
      "Social Media",
      "Web Design",
      "What is Google Authorship",
      "NFL",
      "Fantasy Football Rankings",
      "Kevin Sullivan",
      "Fantasy Football RB Rankings 2013",
      "Fantasy Football",
      "How to Buy Twitter Followers",
      "Advanced IFX",
      "Social Media Marketing",
      "NFL Schedule 2013-2014 Season",
      "Fantasy Football Breakdown",

    ];
    $(".search_box").autocomplete({
  source: availableTags,
  select: function(event, ui) { 
    $(".search_box").val(ui.item.value);
    $("#search").submit();
    });
  });
  </script>

Upvotes: 2

Views: 180

Answers (2)

musicnothing
musicnothing

Reputation: 3985

I think this is what you're looking for:

$(".search_box").autocomplete({
  source: availableTags,
  select: function(event, ui) { 
    $(".search_box").val(ui.item.value);
    $("form").submit();
  }
})

Change "form" to select the specific form you're submitting for the search. This will fill in the search box with whatever value you clicked, then automatically submit the search form.

Here's a jsfiddle you can use to test: http://jsfiddle.net/4gArf/

Upvotes: 1

Darin Dimitrov
Darin Dimitrov

Reputation: 1038720

As shown in the documentation the source property could point to a remote endpoint that will return the data:

<script type="text/javascript">
    $('.search_box').autocomplete({
        source: '/remote.php'
    });
</script>

Upvotes: 0

Related Questions