SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    PHP ajax add to search problems

    I have a live search (code below) on my site that is pulling horse names from my database.

    When you type in the search bar it searches for a closest match.

    The only thing I dont like about the search facility is that you have to click on the result before clicking search.

    If I click search before clicking on the result it will use my input as the result.

    IE. Search for Red will bring up a result of Redrum

    now if I click search it will use Red as my result opposed to Redrum.

    Sorry for the ramble, heres a link to explain what I mean:

    http://thenovicetipster.com/a2z_search.php


    live_a2z_search.php
    PHP Code:
    <?php
    //db connection
    $s mysql_real_escape_string($_REQUEST["s"]);
    $output "";
    $s str_replace(" ""%"$s);
    $query "SELECT DISTINCT * FROM races WHERE name LIKE '%" $s "%' LIMIT 1";            
    $squery mysql_query($query);
    if((
    mysql_num_rows($squery) != 0) && ($s != "")){
    while(
    $sLookup mysql_fetch_array($squery)){
    $displayName $sLookup["name"];
    $output .= '<span style="cursor:pointer"><li onclick="sendToSearch(\'' $displayName '\')">' $displayName '</li></span>';
    }
    }    

    echo 
    $output;
    ?>

    a2z_search.php

    HTML Code:
    <html>
    
    <head>
    <title>TNT Horse Finder</title>
    
    </head>
    <body>
    <script>
    function createRequestObject(){
    var request_o;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
    request_o = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
    request_o = new XMLHttpRequest();
    }
    return request_o;
    }
    
    var http = createRequestObject(); 
    
    function liveSearch()
    {
    var url = "live_a2z_search.php"; 
    var s = document.getElementById('qsearch').value;
    var params = "&s="+s;
    http.open("POST", url, true);
    
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", params.length);
    http.setRequestHeader("Connection", "close");
    
    http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status != 200) {
    document.getElementById('searchResults').innerHTML='<li>Loading...</li>';
    }
    if(http.readyState == 4 && http.status == 200) {
    document.getElementById('searchResults').innerHTML = http.responseText; 
    } 
    }
    http.send(params);
    }
    
    function sendToSearch(str){
    document.getElementById('qsearch').value = str;
    document.getElementById('searchResults').innerHTML = "";
    }
    </script>
    
    
    <?php include_once ('menu.php') ?>  
    
    
    <div style="background-color:#0099CC; color:#fff; clear:both;" >
    <form id="quick-search" action="a2z.php" method="get" >
    <p>
    <label for="qsearch">Search:</label>
    <input id="qsearch" type="text" name="horse" onKeyUp="liveSearch()"  autocomplete="off" />
    <input type="submit" value="Follow Horse"/></p>
    <ul id="searchResults">
    </ul>
    </form>
    </div>
    
    
    </div>
    </div>
    
    </body>
    </html>

  2. #2
    Keeper of the SFL StarLion's Avatar
    Join Date
    Feb 2006
    Location
    Atlanta, GA, USA
    Posts
    3,748
    Mentioned
    72 Post(s)
    Tagged
    0 Thread(s)
    This is the expected and desired result.

    If you want to limit people's selections to only the full name of the breed, use a select box.
    Never grow up. The instant you do, you lose all ability to imagine great things, for fear of reality crashing in.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •