Javascript code to implement incremental search

Question

Aim: When the user types a word in a text box then all the words starting with that word should be populated and we can select one of them.

There are several examples in this [Smashing Magazine article](http://www.smashingmagazine.com/2009/03/08/70-new-useful-ajax-and-javascript-techniques/) under section 10: "Auto-Complete Examples and Demos." — Nate B, Jan 15 '10 at 15:03

score 4 · Answer 1 · answered Jan 15 '10 at 15:25

Here are the best implementations I have come across...

score 2 · Answer 2 · edited Aug 08 '12 at 18:53

2

How-To (no code included)

Implement an Event Handler on the text box to listen for a value changed event.
In the Event Handler, make an AJAX call to the server (assuming you have a web service that will return the results) with the partial word.
Parse the results returned from the AJAX call and place them in a DIV just below the text box, allowing the user to select the correct one.
Show the results DIV.

These are the theoretical steps behind implement that style of text box - without knowing more about your particular setup, it'd be hard to give more advice. It would be best if you posted some of your own code.

edited Aug 08 '12 at 18:53

Brighid McDonnell

4,293
4
36
61

answered Jan 15 '10 at 15:00

Justin Niessner

242,243
40
408
536

1

I basically implemented this as well, but now I am struggling to handle situations when earlier searches take longer to execute, then overwrite the results from later typing. I.e., the results from `jav`... come back later than `javascript` and replace those results. – Stephen Marsh Mar 30 '19 at 17:44

score 0 · Answer 3 · answered Aug 08 '12 at 15:12

0

I think he was talking about incremental search, as in search as your type ala Google. You'll want to put some controls in place depending on your data set and anticipated number of users. For instance if you're expecting a lot of traffic you probably won't want to pull on every key press, maybe add a delay to wait for them to finish typing.

Here's an example using php, Mysql, and Jquery from W3: http://www.w3schools.com/php/php_ajax_livesearch.asp

answered Aug 08 '12 at 15:12

Andy Czachowski

1

2

That article is one example of why w3schools should *never* be linked to as a resource. – Andrew Barber Aug 09 '12 at 01:26

score 0 · Answer 4 · answered Jan 15 '10 at 15:00

0

Do you mean autocomplete?

http://www.javascript-examples.com/autocomplete-demo/

answered Jan 15 '10 at 15:00

Richard JP Le Guen

28,364
7
89
119

This link no longer seems valid – Christopher G Oct 24 '21 at 17:32

Javascript code to implement incremental search

4 Answers4