Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

AJAX suggestion script like in google

Recently I came across one great script that allows you to create suggestions from your database to the user input. More about it here: http://www.robertnyman.com/ajax-suggestions/.

We will use this script to implement into form where input fields are dynamically created (user can add more input fields).

So to use this script you need to include these files between <head></head> tags:

<style type="text/css" media="screen">
    @import url("css/ajax-suggestions.css");
</style>
<script type="text/javascript" src="js/ajaxSuggestions.js"></script>

Then you'll need a form with class attributes which will mark input fields for script:

<form action='' method='post'>
<div id='fields'>
<p>Input field: 
<input type='text' name='fields[]' class="ajax-suggestion url-suggest.php" /> 
<a href='javascript:void(0);' onclick='add_field()'>Add another field</a>
</p>
</div>
<p><input type='submit' value='Submit'/></p>
</form>

And here is javascript function to dynamically add new input field:

function add_field()
{
    //where to attach input
    var attachform = document.getElementById("fields");
    //creating p element
    var p = document.createElement("p");
    //adding text to p element
    p.innerHTML = "Another input field: ";
    //creating input
    var inp = document.createElement("input");
    //adding attributes to input
    inp.setAttribute("type", 'text');
    inp.setAttribute("name", 'fields[]');
    inp.setAttribute("id", authors);
    inp.setAttribute("class", "ajax-suggestion url-suggest.php");
    inp.focus();
    //addinput input to p element
    p.appendChild(inp);
    //attaching p to form
    attachform.appendChild(p);
    //restarting ajax suggestions
    ajaxSuggestions.init();
}

After form you need to add div, which will be used to display suggestions:

<div id="search-result-suggestions">
    <h4>Results:</h4>
    <div id="search-results">
    </div>          
</div>

You also need to modify ajaxSuggestions.js script settings like this:

// Settings
    elmIdToPresentResultsIn : "search-results",
    elmIdResultsContainer : "search-result-suggestions",
    charactersBeforeSearch : 2,
    timeBeforeSuggest : 200, // In milliseconds
    sameWidthAsInputElm : false,
    //you can adjust offsets so it will match where your input is
    offsetLeft: 0,
    offsetTop : 0,
    urlExt : "search=",
    addSearchTermToQueryString : true,
    addKeyNavigationEvents : true,
    hideResultsOnDocumentClick : true,
    itemClassName : "item",
    itemSelectedClassName : "selected",
    itemInsertValueIntoInputClassName : "choose-value",
    itemInsertValueSetFocusToInput : true,
    hideResultsWhenInsertValueIsSelected : true,
    //empty seperator, cause we will have dynamical inputs to add more values
    itemSeparator : "",
    turnAutoCompleteOff : true,

Of course suggest.php code, that will generate suggestions:


<?php
if (isset($_GET['search']))
{
    $con = mysql_connect("host", "user", "pass");
    echo "<ul id='suggestions'>";
    $query = "select * from table where something like '".$_GET['search']."%'";
    $result = mysql_query($query, $con);
    if(mysql_num_rows($result) > 0)
    {
        while($row = mysql_fetch_array($result))
        {
            //using class item choose-value so we can select items 
            //using arrows and input them in the field onclick or enter
            //value into href attribute which will be inputted into input field
            //and value between <a></a> tags to display value
            echo "<li><a href='".$row['value']."' ".
            "class='item choose-value'>".$row['value']."</a></li>";
        }   
    }
    else
    {
        echo "<li>No suggestions</li>";
    }
    echo "</ul>";

}
?>

And after form submit all your inputted data is stored in $_POST['fields'] array.


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus