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
