SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery Auto Complete Issues

    Hello,
    I am trying to use AutoComplete which queries a mySQL database.
    It seems to be pulling data however the box is coming up blank.
    I think the query is working because when I use text that I know will return a record, I get a pop up, when i type other text, the pop up does not come up.

    I have tried different versions of the CSS and the JS and same result. Pops up blank.

    autofield.png

    I have two files. tagsfield.php, which is the HTML for the tag field
    And tagssearch.php which is the database query.

    tagssearch.php
    PHP Code:
    <?php
    mysql_connect
    (localhost,"REMOVED","REMOVED")  or die("Unable to connect to MySQL");
    @
    mysql_select_db("REMOVED")  or die( "Unable to select database");
    $term trim(strip_tags($_GET['term']));//retrieve the search term that autocomplete sends
    $qstring  "SELECT * FROM tags WHERE tagname LIKE '%".$term."%'";
    $result mysql_query($qstring);//query the database for entries containing the term

    while ($row mysql_fetch_array($result,MYSQL_ASSOC))//loop through the retrieved values
    {
         
    $row['tagname']=htmlentities(stripslashes($row['tagname']));
         
    $row['tagid']=(int)$row['tagid    '];
         
    $row_set[] = $row;//build an array
    }
    echo 
    json_encode($row_set);//format the array into json data
    mysql_close();
    ?>
    tagsfield.php
    PHP Code:
    <!DOCTYPE html>
    <
    html lang="en">
    <
    head>
        <
    meta charset="UTF-8" />
        <
    title>EAN Demo using jQuery Autocomplete PHP-MySQL Query for data</title>
        <
    link type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
        <
    script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min"></script>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
        
        <script type="text/javascript">
        $(function() {
        $("#autocomplete").autocomplete({
          source: "tagssearch.php",
          minLength: 2,//search after two characters
          select: function(event,ui){
            alert ($tagid, $tagname);
          //do something, like search for your hotel detail page
          }
        });
        });
    </script>
    </head>
    <body>
        
    <div class="demo">
      <div class="ui-widget">
         <label for="autocomplete">Hotel Name: </label>
         <input id="autocomplete" />
      </div>
    </div><!-- End demo -->


    </body>
    </html> 
    In Case you need it
    Here is the table data.

    Code:
    SET FOREIGN_KEY_CHECKS=0;
    -- ----------------------------
    -- Table structure for `tags`
    -- ----------------------------
    DROP TABLE IF EXISTS `tags`;
    CREATE TABLE `tags` (
      `tagid` int(10) NOT NULL AUTO_INCREMENT,
      `tagname` varchar(255) DEFAULT NULL,
      PRIMARY KEY (`tagid`)
    ) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;
    
    -- ----------------------------
    -- Records of tags
    -- ----------------------------
    INSERT INTO tags VALUES ('1', 'Pop');
    INSERT INTO tags VALUES ('2', 'Hot Artists');

  2. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,501
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    1) to see if the query script works, you can call it directly putting a search value in the query string
    Code:
    http://www.yourdomain.com/tagssearch.php?term=value
    2) the query script creates a two-dimensional array. Are you sure your jquery code handles that automatically to give you a $tagid and $tagname value?

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Here you are using localhost as a constant. Shouldn't it be a string instead?
    Code:
    mysql_connect(localhost,"REMOVED","REMOVED") ...
    And here, $row_set hasn't previously been defined, which causes issues too. Especially if you have reporting enabled.
    Code:
    $row_set[] = $row;//build an array
    And here, those spaces are bad.
    Code:
    $row['tagid']=(int)$row['tagid    '];
    And lastly, the autocomplete expects the json data to be as label and value properties. Not as is shown below:
    Code:
    $row['tagname']=...
    $row['tagid']=...
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •