Type and display word characterwise in textbox

[subrata_ushasi]

Hi all ,

I want to display characterwise display of word in a textbox. I think it is possible in ajax. Like if I enter "A" will show in text box "AMERICA" ,"AFGANISTHAN","AUSTRALIA","AFRICA","AGONY","AMNESTY" etc. again if I enter "M" after "A" will filter only "AMERICA" and "AMNESTY" because only matching "A" and "M" ie "AM" and so on. So entering one by one character or letter will filter the words and display in textbox. Please anybody else.

Thanks in advance.

Subrata

[pritaeas]

http://jqueryui.com/demos/autocomplete/

[subrata_ushasi]

pritaeas ,

Thanks for quick answer but two questions are arising . First is ,values will come from database and second point is output is desired because I said values will come as per character from the left where as in the demo values are coming randomly lie if I give "f" the result is "ColdFusion" and "Fortran" because both contains "f" but I want if I press "f" will display say "Fortran","Falcum","Fortune" ,"Fantastic" etc then if I press "o" after "f" will display "Fortran" and "Fortune" and if I press "a" after "f" will show "Falcum","Fantastic" etc using mysql,php ,javascript or ajax.

Thanks

Subrata

[Troy III]

it is possible, of course, but what do you have so far, can we see your code?

[Taywin]

If you want to create your own autocomplete from scratch using javascript (and using backend), look for observefield and Ajax to do the work. The ajax part will return proper (sorted) data to create a selection list. I did the same thing at work.

[JorgeM]

Here's a sample that you can use to start with. Add an input box on a HTML page. Integrate jQuery and use the keyup method. Send the input value via Ajax to a page that takes the Form parameter "str" and performs a query against the data source and returns the results back.

HTML

<input id="input1" type="text" />Search<br />
<span id="results"></span>

jQuery

   $("#input1").keyup(function () {
        var txt = $("#input1").val();
        $.post("gethint.aspx", { str: txt }, function (data) {
            $("#results").html(data);
        });
    });

Source: http://www.itgeared.com/articles/1390-jquery-ajax-methods-tutorial/