Auto complete textbox from database

[achintya]

Hi all,
I have texbox where I want some function that will on keyup will display similar names from database on the fly. If anyone has any idea about this,please let me know. I have googled it but not found appropriate code. Can anyone tell me what keyword should I use?
Thanks

[Cborrow]

Your looking for something like this?

http://ajaxian.com/archives/using-aj...-auto-complete

You can find more by searching for something like "auto complete textbox ajax php"

[spikeZ]

You mean like google suggest?

I wrote something simialr recently.

search.php

function ajaxsearch($input) {
 
 
    $search = addslashes($input);
    
    
//Get every page title for the site.
    $sql = mysql_query("
        SELECT * FROM 
            hotel_pages 
        where 
            page_name like('" . $search . "%')
        ORDER BY page_name") or die(mysql_error());
    
    if(mysql_num_rows($sql) == 0) {
        echo 'No results';
    } else {
        while($rows = mysql_fetch_assoc($sql)) {
            
            echo $rows['page_name'] .' '. substr(strip_tags(stripslashes($rows['page_text'])), 0, 100) .'<br />';
        }
    }
}

ajaxsearch($_GET['search']); 

form.php

<script type="text/javascript">
function createRequestObject() { 
     
    var req; 
    if(window.XMLHttpRequest){ 
        // Firefox, Safari, Opera... 
        req = new XMLHttpRequest(); 
    } else if(window.ActiveXObject) { 
        // Internet Explorer 5+ 
        req = new ActiveXObject("Microsoft.XMLHTTP"); 
    } else { 
        // There is an error creating the object, 
        // just as an old browser is being used. 
        alert('There was a problem creating the XMLHttpRequest object'); 
    } 
    return req; 
} 
     
    // Make the XMLHttpRequest object 
var http = createRequestObject(); 
     
function searchSuggest(act) {       
    // Open script for requests 
    http.open('get', 'search.php?search=' +act); 
    http.onreadystatechange = handleResponse; 
    http.send(null); 
} 
     
function handleResponse() { 
    if(http.readyState == 4 && http.status == 200){ 
        var response = http.responseText; 
        if(response) { 
            // UPDATE ajaxTest content 
            document.getElementById("updateMe").innerHTML = response; ; 
        }  
    } 
} 

function update(answer) { 
    searchSuggest(answer); 
}
</script>

<form id="frmSearch" action="search.php">
    <input type="text" id="search" name="search" alt="Search Criteria" 
        onkeyup="searchSuggest(this.value);" autocomplete="off" />
    <input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" />
</form>


<div id="updateMe"></div> 

As a basic bare bones script, play with it

[achintya]

Thanks. yes,just like google suggest. Can I display it inside the textbox itself? Thanks again.

[spikeZ]

Yes you could display it in the textbox but that would cause you all sorts of problems if more than one result is returned!

[achintya]

How to handle that by the way? Thanks Again.

[spikeZ]

Have a look at http://www.dynamicajax.com/fr/AJAX_S...0_312_314.html which is where I based my script from. It has the dropdown attatched to the search box as well as some other javascripts for handling the selection etc.

[BluDragon]

Check out Scriptaculous.

[Hammer65]

There is some debate about this, but because the query to the database needs to be as quick as possible, It's best to get just the field you are looking for, rather than using "*".

[spikeZ]

Yes I agree Hammer, also consider the fact that a query is made EVERY time you type a letter.
It was suggested in another thread that one query is done and the results dumped into an array and THAT array is used for the searching.

For a small database, either solution would work but for a massive database I really wouldnt use either!

[Hammer65]

I did one of these once, but limited the action to every three characters to keep the activity down.

[spikeZ]

Quite a good comprimise Hammer