autocomplete with jquery UI

Question

I have this code working,

$(function() {
    $("#student").autocomplete({
        source: "search.php",
        minLength: 2,
        select: function(event, ui) {
            $('#id').val(ui.item.id);
        }
    });
});

it is the old way of doing it, i want to implement the new feature with cache enabled and also need to add the add the change event when i try to change something in the input field, it should detect it and i can create my action which can be adding an alert or anything

Updated my Question with an Image, also i tried using the course and select tags and changed it a bit to make it work, but i am still missing the part where i once selected , start removing the values from the selected input and want that the button below it should hide because i started editing the values just like the propertychange value of internet explorer, but can't change that property because it is internet specific

Answer 1

Consider the following code.

$(function(){
  var cache = {};
  $("#student").autocomplete({
    source: function(req, resp){
      var term = req.term
      if(!(term in cache)){
        $.getJSON("search.php", req, function(data){
          cache[term] = data;
        });
      }
      resp(cache[term]);
    },
    minLength: 2,
    select: function(event, ui) {
      $('#id').val(ui.item.id);
    }
  });
});

This will build a cache and populates that object on each lookup. If a term has been search before, it will just present the cached results.