Question

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!

Answer 1

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