Auto tips when entering character (s) in the input field?

Question

There is a huge database of cities and other things in the system (locations) waiting to exit the system in the form of a drop-down list, div (s) or something that can compress a huge number of options - immediately after each desired location is entered into this input field .

The similarity is similar to adding tags here when we post questions. Therefore, if we enter "L", London and Lazio will be listed, after "La" - only Lazio will remain.

Any steps or interesting examples on how to do this? Tried to find something smug, but no luck. I am using jquery.

Answer 1

This may not be the best solution, but it works on my site. This script implements the street name automatically, depending on the state and city that the user entered earlier. This piece of code listens for the keyup event. If the user has entered more than one letter, the script launches an ajax request in which the .PHP script analyzes the sent parameters, executes the SQL query and responses. If the user is lucky and he gets some suggestion on the street name that he is trying to find, we show him a div with id = hintsTable. We also create an event listener (click) for each autocomplete parameter, in which we replace the value of the input field for the autocomplete parameter and hide the drop-down list. Hope this helps.

$("#street input").keyup(function(){ //street enter var input = $('#street input').val(); //we get what user has already entered var code = $('#mregionSelect').val(); //city id if(input.length > 1) { $.ajax({ type : "POST", url : "components/com_areas/ajaxhelper.php", data : "input=" + encodeURIComponent(input) + "&code=" + code, cache : false, }).done(function(msg){ if(msg.length > 0) { $('#hintsTable').html(msg); //fill drop-down list with auto complete options $('#hints').css('display', 'block'); //show the list $('#hintsTable tr').click(function(){ var hint = this.cells[0].innerHTML; $('#street input').val(hint); $('#hints').css("display", "none"); }) } else { $('#hintsTable').html(''); $('#hints').css('display', 'none'); //$('#findButton').css('display', 'none'); } }) } else { $('#hintsTable').html(''); $('#hints').css('display', 'none'); //$('#findButton').css('display', 'none'); } }) 

Answer 2

You can create a text box with a div under

 <input name="txtSearch" type="text" onkeydown="jscriptfunc();" autocomplete="off"/> <div class="autoDiv"></div> (could use CSS to format the div accordingly) 

Now jscriptfunc for when the user presses a key down can be encoded to call a PHP script using ajax. This PHP script takes everything that the user has typed so far, and performs a simple search for matching patterns, for example.

 Select * from table where field like '$input%' limit 5; 

Then we just take the result and feed it to the div