CODEWITHSUNDEEP
jqueryjquery-ui
K20GH
K20GH

Reputation: 6263

Jquery search on enter with autocomplete

I've got some JQuery which works fine. It loads all the autocomplete values, and upon clicking them, they load the searchdata.php which performs all the searching. This works.

What I can't figure out is, if the user decides they don't want to select an autocomplete value and hit enter instead, how do I get it to perform the searchdata.php on the value that is in the search input upon hitting enter WITHOUT reloading the page? I've tried bind and live and can't get it to work.

<script type="text/javascript">
$(document).ready(function() {

var availableTags = <?php echo json_encode($findrow);?>;

  $("#search_input").watermark("Begin Typing to Search");
  $('#searchresultdata').append(sendSelected);

    $("#search_input").autocomplete({
        source: availableTags,
        select: function(event, ui) {
          sendSelected(ui.item.value);
          }
        });

function sendSelected(_val){
    var search_input = _val;
    if (search_input =='') search_input ='*';
    var dataString = 'keyword='+search_input;

    if (search_input.length > 2 || search_input=='*') {
       $.ajax({
            type: "GET",
            url: "core/functions/searchdata.php",
            data: dataString,
            success: function(server_response) {
                $('#searchresultdata').empty();
                $('#searchresultdata').append(server_response);
                $('span#category_title').html(search_input);
            }
        });
    }
}
});
</script>

Upvotes: 4

Views: 10699

Answers (3)

Evan Davis
Evan Davis

Reputation: 36592

$("#search_input").keypress(function(e) {
  if(e.keyCode == 13)
     {
         e.preventDefault();
         sendSelected(this.value);
         $(this).autocomplete('close');
     }
});

Upvotes: 7

The System Restart
The System Restart

Reputation: 2881

$("#search_input").on('keyup', function(event) {
  if(event.which == 13)  // event.which detect the code for keypress in jQuery
     {
         event.preventDefault();
         sendSelected(this.value);
     }
});

Upvotes: 3

raddrick
raddrick

Reputation: 4453

you can use event.preventDefault() on the action and it wont submit the page, you just have to be sure to juggle it on and off when you need to

http://api.jquery.com/event.preventDefault/

Upvotes: 2

Related Questions