Home/ Questions/Q 7624531
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T04:59:18+00:00

I am new to jquery & autocomplete, and am trying to learn them. The

  • 0

I am new to jquery & autocomplete, and am trying to learn them. The following works as I expect, except when someone types in something and hits ENTER. Then the textbox goes blank. How do I suppress this? I’d like it to trigger one of the existing events – select or change. Thanks,

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
      a.test { font-weight: bold; }
    </style>
  </head>
  <body>
    <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css">
    <link rel="stylesheet" type="text/css" href="css/autocomplete.css">
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
    <script>
      $(document).ready(function(){

            //attach autocomplete
            $("#suggest4").autocomplete({

                    //define callback to format results
                    source: function(req, add){

                            //pass request to server
                            $.getJSON("friends.php?callback=?", req, function(data) {

                                    //create array for response objects
                                    var suggestions = [];

                                    //process response
                                    $.each(data, function(i, val){
                                    suggestions.push(val.name);
                            });

                            //pass array to callback
                            add(suggestions);
                    });
            },

            //define select handler
            select: function(e, ui) {
                $("#spill").html("change "+ui.item.value+" "+e.type);
            },

            //define select handler

            change: function(e) {
                $("#spill").html("change "+$(this).val()+e.type);
            }

          });
      });
    </script>
    <div id="content">
      <form>
        <p>
          <label>Multiple Birds (local):</label>
          <input type="text" id="suggest4"></input>
        </p>
      </form>
    </div>
    <div id="spill">
    </div>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to bind to input keypress event, look for enter and then do what you want:

    $('#suggest4').keypress(function(e) {
     //catch only enter
     if(e.keyCode == 13) {
       e.preventDefault(); 
       //put your stuff in here
     }
  });
    • 0