Simple Text-field is normal. Lets try something new so now we'll dissuss about autoSuggest text-field. You can use it your Registration Form or as per you need. Its very classy. All Thanks goes to jquery. You need a database from where suggestions are displayed on client machine. For this purpose you need to create a database and upload the .sql file which is in the Zip folder.Include jquery scripts in head section of html.
Steps are simple just create a php file and use its code in html file.
Download
Requirements:
- HTML
- Jquery
- Ajax
- MYSQL
- PHP
If input string contains '0' it hides the suggestion box otherwise displays suggestions as per in the database.
We take the input string and post it to the php page using $.POST( )
<input id="inputString" onkeyup="lookup(this.value);" type="text" />
The 'callback' part allow to hook in the function. If the data returnefd length is more than '0' the it shows the suggestion box and replace the the data with HTML. This is really tricky.
PHP Code:
// PHP5 Implementation - uses MySQLi. // mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase'); $db = new mysqli('localhost', 'root' ,'', 'autocomplete'); if(!$db) { // Show error if we cannot connect. echo 'ERROR: Could not connect to the database.'; } else { // Is there a posted query string? if(isset($_POST['queryString'])) { $queryString = $db->real_escape_string($_POST['queryString']); // Is the string length greater than 0? if(strlen($queryString) >0) { // Run the query: We use LIKE '$queryString%' // The percentage sign is a wild-card, in my example of countries it works like this... // $queryString = 'Uni'; // Returned data = 'United States, United Kindom'; // YOU NEED TO ALTER THE QUERY TO MATCH YOUR DATABASE. // eg: SELECT yourColumnName FROM yourTable WHERE yourColumnName LIKE '$queryString%' LIMIT 10 $query = $db->query("SELECT value FROM countries WHERE value LIKE '$queryString%' LIMIT 10"); if($query) { // While there are results loop through them - fetching an Object (i like PHP5 btw!). while ($result = $query ->fetch_object()) { // Format the results, im using
Javascript:
Jaascript is too simple in the whole code just a function which is been called in the text filed where input is to be placed.
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
HTML Code:
<body> <div> <form> <h2>Type your county:</h2> <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" /> <div class="suggestionsBox" id="suggestions" style="display: none;"> <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> <div class="suggestionList" id="autoSuggestionsList"> </div> </div> </form> </div> </body>
Hope you will like my post.
Hi, here's a good tutorial that may help you too, its a simple search that uses php and ajax to fetch data in mysql and display it quickly. http://www.upgradedtutorials.info/tutorials/fast-search-and-sorting-data-in-mysql-using-php-and-ajax/
ReplyDelete