Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

using arrows and tab to select from auto suggest list

Posted on 2009-05-19
2
Medium Priority
?
742 Views
Last Modified: 2012-05-07
I have a form with several text boxes that need to be populated with existing data from a db.  I found a script that uses jquery/css/php to "auto suggest".  I have managed to customize it enough that each box is drawing from a different query.  

Now I would like to make it where I can use keyboard to arrow down the list and then select an item (fill my input box) by using the tab.  

Not sure what Yahoo search assist uses but it works the way I would like mine to work.  

I am not tied to this script, but I know I can make as many input boxes as needed and get the list of hints with it.

Thanks for any help.
///////////////////////// rpc.php ///////////////////////////////
<?php
       // echo$_POST['queryString'];
        // PHP5 Implementation - uses MySQLi.
        // mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
        $db = new mysqli('localhost', 'root' ,'******', 'webtracks');
 
        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'])) {
                        $origString = $db->real_escape_string($_POST['queryString']);
                        $partsString = explode(":",$origString);
                        $queryString =$partsString[0];
                        $loc=$partsString[1];
                        // Is the string length greater than 0?
 
                        if(strlen($queryString) >0) {
                                switch ($loc){  //different loc need different queries
                                        case 1:         // coordinator
                                                   $qry="select * from client where ClientName LIKE '%$queryString%' LIMIT 10";
                                                      break;
                                        case 2:
                                        $qry="select *,concat(firstname, ' ',lastname) as 'FullName' from coordinators where concat_ws(' ',firstname,lastname) LIKE '%$queryString%' LIMIT 10";
                                                                                break;
                                                                                case 3:
                                                                                        //echo "3<p>";
                                        $qry="select * from stockid where StockName LIKE '%$queryString%' LIMIT 10";
                                                break;
                                                                                case 4:
                                                                                        //echo "4<p>";
                                        $qry="select * from location where LocationName LIKE '%$queryString%' LIMIT 10";
                                                break;
                                }
                                $query =$db->query($qry);
                                // end of switch to make query
                                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 <li> for the list, you can change it.
                                                // The onClick function fills the textbox with the result.
                                        switch ($loc){  // different loc need different results
                                        case 1:  // coordinator
                                                // YOU MUST CHANGE: $result->value to $result->your_colum
                                         echo '<li onClick="fill1(\''.$result->ClientId.'-'.$result->ClientName.'\');">'.$result->ClientId.'-'.$result->ClientName.'</li>';
                                                break;
                                        case 2:  // coordinator
                                                // YOU MUST CHANGE: $result->value to $result->your_colum
                                         echo '<li onClick="fill2(\''.$result->SalesCoordinatorId.'-'.$result->FullName.'\');">'.$result->SalesCoordinatorId.'-'.$result->FullName.'</li>';
                                                         break;
                                        case 3:
                                                                                                // YOU MUST CHANGE: $result->value to $result->your_colum
                                         echo '<li onClick="fill3(\''.$result->StockName.'\');">'.$result->StockName.'-'.$result->Description.'</li>';
                                                break;
                                        case 4:
                                                                                                // YOU MUST CHANGE: $result->value to $result->your_colum
                                         echo '<li onClick="fill4(\''.$result->LocationName.'\');">'.$result->LocationName.'-'.$result->LocationDescription.'</li>';
                                                break;
                                                                }// end of switch to make result
                                        }
                                } else {
                                        echo 'ERROR: There was a problem with the query.';
                                }
 
                        } else {// Dont do anything
                        }// There is a queryString.
                } else {
                        echo "There should be no direct access to this script!";
 
                }
        }
?>
 
////////////////////////////// form ////////////////////////////////////////
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Auto Suggest</title>
 
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="lookup_function.js"></script>
 
<style type="text/css">
        body {
                font-family: Helvetica;
                font-size: 11px;
                color: #000;
        }
 
        h3 {
                margin: 0px;
                padding: 0px;
        }
 
        .suggestionsBox {
                position: relative;
                left: 30px;
                margin: 10px 0px 0px 0px;
                width: 200px;
                background-color: #212427;
                -moz-border-radius: 7px;
                -webkit-border-radius: 7px;
                border: 2px solid #000;
                color: #fff;
        }
 
        .suggestionList {
                margin: 0px;
                padding: 0px;
        }
 
        .suggestionList li {
 
                margin: 0px 0px 3px 0px;
                padding: 3px;
                cursor: pointer;
        }
 
        .suggestionList li:hover {
                background-color: #659CD8;
        }
</style>
 
</head>
 
<body>
 
 
        <div>
                <form>
                        <div>
                                Clients:
                                <br />
                                <input type="text" size="30" value="" id="inputString1" onkeyup="lookup(this.value,1);" onblur="fill1();" />
                        </div>
 
                        <div class="suggestionsBox" id="suggestions1" style="display: none;">
                                <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                                <div class="suggestionList" id="autoSuggestionsList1">
                                        &nbsp;
                                </div>
                        </div>
                        <div>
                                Coordinators:
                                <br />
                                <input type="text" size="30" value="" id="inputString2" onkeyup="lookup(this.value,2);" onblur="fill2();" />
                        </div>
 
                        <div class="suggestionsBox" id="suggestions2" style="display: none;">
                                <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                                <div class="suggestionList" id="autoSuggestionsList2">
                                        &nbsp;
                                </div>
                        </div>
                         <div>
                                Stock Id:
                                <br />
                                <input type="text" size="30" value="" id="inputString3" onkeyup="lookup(this.value,3);" onblur="fill3();" />
                        </div>
 
                        <div class="suggestionsBox" id="suggestions3" style="display: none;">
                                <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                                <div class="suggestionList" id="autoSuggestionsList3">
                                        &nbsp;
                                </div>
                        </div>
                        <div>
                                Location:
                                <br />
                                <input type="text" size="30" value="" id="inputString4" onkeyup="lookup(this.value,4);" onblur="fill4();" />
                        </div>
 
                        <div class="suggestionsBox" id="suggestions4" style="display: none;">
                                <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                                <div class="suggestionList" id="autoSuggestionsList4">
                                        &nbsp;
                                </div>
                        </div>
                </form>
        </div>
 
</body>
</html>
 
/////////////// lookup_function.js ///////////////////////////////
 
function lookup(inputString,loc) {
                var css = '#suggestions'+loc;
                var list = '#autoSuggestionsList'+loc; // loc determines which box to populate // sent here then sent back by php
                if(inputString.length == 0) {
                        // Hide the suggestion box.
                        $(css).hide();
 
                } else {
                        inputString=inputString+":"+loc;
                        //alert(list+"-"+inputString);
                        $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
                                if(data.length >0) {
                                        $(css).show();
                                        $(list).html(data);
                                }
                        });
                }
        } // lookup
 
function fill1(thisValue) { // clients
                    $('#inputString1').val(thisValue);
                setTimeout("$('#suggestions1').hide();", 200);
        }
function fill2(thisValue) { //coordinators
                    $('#inputString2').val(thisValue);
                setTimeout("$('#suggestions2').hide();", 200);
        }
function fill3(thisValue) { //Stock Id
                    $('#inputString3').val(thisValue);
                setTimeout("$('#suggestions3').hide();", 200);
        }
function fill4(thisValue) { //Location
                    $('#inputString4').val(thisValue);
                setTimeout("$('#suggestions4').hide();", 200);
        }

Open in new window

0
Comment
Question by:James Stone
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 24429149
0
 

Author Closing Comment

by:James Stone
ID: 31583171
Great site, I wonder why I didn't come across when I googled for 4 hrs!

Thanks, I found exactly what I wanted.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question