WordPress.org

Ready to get started?Download WordPress

Forums

How to add autocomplete (autosuggest) to text input field? (9 posts)

  1. wordyword
    Member
    Posted 5 years ago #

    On one of my blogs, I'm using the comments input text box for very short answers to survey questions. Many answers will be similar or identical, so it would be helpful to have an auto suggest in effect to avoid slight misspellings, etc. Does anyone know how to add an autocomplete (autosuggest) function to the input box, so that user's see a drop down list of pre-existing PUBLISHED comments from the WP data base? The drop down autosuggest list would filter (drill-down to closest match) as the user types each letter. User can select the desired result and it will populate the text input field, or they can just enter their own unique text. I've seen examples of scripts, AJAX, JS, but it eludes a novice like myself how to implement into the WP code. Thanks so much for any help.

  2. Glenn Ansley
    Member
    Posted 5 years ago #

    WordPress has a jQuery auto suggest plugin included in /wp-includes/js/jquery/ It's called suggest.js and you can read more about how to use it here: http://www.vulgarisoip.com/2007/06/29/jquerysuggest-an-alternative-jquery-based-autocomplete-library/

    You can wp_enqueue_script('suggest') to load it in the header. More on that here: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

  3. wordyword
    Member
    Posted 5 years ago #

    Thanks for the tip. I took a look at those pages, and understand how to load the script with wp_enqueue, but not sure exactly how to insert code so that it imports pre-existing comments from the WP database into the drop-down suggestions area. Here is the code from my template's comments page. Is is where I should put the script's commands? Please tell me how to modify if you can. Thanks!
    <p>Reply <textarea name="comment" id="comment" cols="45" rows="10" tabindex="4"></textarea></p>

  4. Glenn Ansley
    Member
    Posted 5 years ago #

    You're going to have to use some css and create a php file that outputs something like this: http://www.vulgarisoip.com/files/search.phps

    There is also some CSS that you'll need to append to your stylesheet.
    http://www.vulgarisoip.com/files/jquery.suggest.css only with your data.

    The JS is referenced on the link I mentioned in my first post. I imagine you're would look something like this:

    jQuery(function() {
    jQuery("#comment").suggest("yourcustomscript.php");
    });
  5. wordyword
    Member
    Posted 5 years ago #

    I grasp how to implement the JS and CSS, but am still a little confused how to code the output xyz.php file. I don't want to manually create results like the list of birds as shown in the example, but rather to have the list of results generated from the respective Post ID's comments_content in WP database.

  6. Glenn Ansley
    Member
    Posted 5 years ago #

    Right. You'll need to make a script that does the following and poin the jQuery at it:

    1. Connects to the WP DB
    2. Queries the table for the data you want
    3. Convert the result set into an associative array (or pull it from the DB as one)
    4. Create a function similar to the example given on the other site using your array's name.
  7. wordyword
    Member
    Posted 5 years ago #

    Thanks again. I've tried without success to figure out the code used in the PHP query to generate the results from the database. In the example PHP query/output file, the bird names appear in a list within PHP tags (i.e. "Great Bittern"=>"Botaurus stellaris",
    "Little Grebe"=>"Tachybaptus ruficollis", etc) but I can't figure the code used to generate the array/list from the database. Here's what I have so far. Am I on the right track?

    <?php
    $q=$_GET["q"];

    $con = mysql_connect('localhost', 'user', 'password');
    if (!$con)
    {
    die('Could not connect: ' . mysql_error());
    }

    mysql_select_db("db_name", $con);

    $sql="SELECT * FROM user WHERE id = '".$q."'";

    $result = mysql_query($sql);

    while($row = mysql_fetch_array($result))

    //I'm lost at this point

    $q = strtolower($_REQUEST["q"]);
    if (!$q) return;
    $items = array();

    foreach ($items as $key=>$value) {
    if (strpos(strtolower($key), $q) !== false) {
    echo "$key\n";
    }
    }
    mysql_close($con);
    ?>

  8. wordyword
    Member
    Posted 5 years ago #

    Thanks again. I've tried without success to figure out the code used in the PHP query to generate the results from the database. In the example PHP query/output file, the bird names appear in a list within PHP tags (i.e. "Great Bittern"=>"Botaurus stellaris",
    "Little Grebe"=>"Tachybaptus ruficollis", etc) but I can't figure the code used to generate the array/list from the database. Here's what I have so far. Am I on the right track?

    <?php
    $q=$_GET["q"];
    
    $con = mysql_connect('localhost', 'user', 'password');
    if (!$con)
     {
     die('Could not connect: ' . mysql_error());
     }
    
    mysql_select_db("db_name", $con);
    
    $sql="SELECT * FROM user WHERE id = '".$q."'";
    
    $result = mysql_query($sql);
    
    while($row = mysql_fetch_array($result))
    
    //I'm lost at this point
    
    $q = strtolower($_REQUEST["q"]);
    if (!$q) return;
    $items = array();
    
    foreach ($items as $key=>$value) {
    	if (strpos(strtolower($key), $q) !== false) {
    		echo "$key\n";
    	}
    }
    mysql_close($con);
    ?>
  9. nchankov
    Member
    Posted 5 years ago #

    I made a plugin with the same functionality called autocompleter, you can search it in the plugin library. Well it's not based on the default suggest.js of jQuery, but it uses a jquery library too.
    You may take a look on it at Autocompleter

Topic Closed

This topic has been closed to new replies.

About this Topic