tags:

views:

96

answers:

1

Hello everyone,

I am trying to make it easy form my end users to search through my sites by autofilling the search box when the user types in a word through using ajax calls.

Now first I will show you my code so far and then I will add the questions I have.

Here is the HTML:

<input type="text" id="searchfield" name="q" >

And the jquery:

jQuery("#searchfield").keypress(function(e){
        var searchval = jQuery("#searchfield").val();     
        console.log(searchval);

        /*
        jQuery.ajax({
         type: 'POST',
         url: 'ajax_handler.php',
         dataType: 'json',
         data: {
          search: searchval
         },
         succes: function(data){
          console.log("good");
          console.log(data.msg);
         },
         error: function(data){
          console.log("error");
         }

        });
         return false;
        */ 
    });

note: I am using jquery 1.3.2.min.js

  1. Now when I log the searchval like this, every time i see my searchterm in the console. But when I uncomment my ajax request after typing a letter my input box becomes empty.
  2. When I Incomment my ajax and look in firebug when I add an letter to my searchox the value of search in my ajax request seems to be empty. How come?
  3. How to I get a dropdownlist under by textbox containing the suggested values. Assuming the values I get back from the ajax requests are ok. (I probably neet to add the values to an html object, but which one? and how?)

This is all based on this tutorial: Link to tutorial

I hope some one can help me. Thanks anyway!

+1  A: 

I think the problems with 1. and 2. are related to sentence "return false;" at the end of your function. Delete that and try again.

As for autocomplete i suggest you to not to invent bike and search for autocomplete plugins like this one: http://www.pengoworks.com/workshop/jquery/autocomplete.htm

algiecas
Thanks for the reaction. I have looked around for plugins.I find them hard to use since it never gives a clear way how to use. For exmple where do i give the url for the ajax requests.
sanders
For that exact plugin there is documentation (which is not so user friendly): http://www.pengoworks.com/workshop/jquery/autocomplete_docs.txtYou would use it like this:$("#searchfield").autocomplete("ajax_handler.php");Let's assume you typed in "test", then according to documentation autocomplete will request ajax_handler.php?q=test and the response should contain elements each on a single line, like:TestTestamentTestingand so on...Hope this helps.
algiecas