Results 1 to 3 of 3

Thread: [RESOLVED] jQueryUI - Autocomplete

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    Resolved [RESOLVED] jQueryUI - Autocomplete

    I currently have a PHP file that is returning the JSON equivalent of some rows returned from a database, for what its worth, here is the PHP file:
    Code:
    <?php
      $configs_database = include('config_database.php');
    
      // Database variables
      $dbHost = $configs_database['host'];
      $dbUsername = $configs_database['username'];
      $dbPassword = $configs_database['password'];
      $dbName = $configs_database['name'];
    
      /* Create connection */
      $dsn = "mysql:dbname=$dbName;host=$dbHost;charset=utf8mb4";
      $db = new PDO($dsn, $dbUsername, $dbPassword);
      $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
      $db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
    
      // Search for 
      $stmt = $db->prepare("SELECT `customer`.`household_id`, `customer`.`first_name`, `customer`.`last_name`, `suffix`.`suffix`, `customer`.`phone`, `customer`.`email`
                            FROM `customer`
                            INNER JOIN `suffix` ON `suffix`.`suffix_id` = `customer`.`suffix_id`;");
      $stmt->execute();
      $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
      $json = [];
      // Iterate through each row
      foreach ($rows as $row) {
        $customer = new stdClass();
        $customer->label=implode(' ', [$row['first_name'], $row['last_name'], $row['suffix'], format_phone($row['phone']), $row['email']]);
        $customer->value=$row['household_id'];
    
        array_push($json, $customer);     
      }
    
      // Return the array encoded as JSON data
      echo json_encode($json);
      
      function format_phone($phone) {
        if(preg_match( '/^(\d{3})(\d{3})(\d{4})$/', $phone,  $matches )) {
            $phone = $matches[1] . '-' .$matches[2] . '-' . $matches[3];
        }
        return $phone;
      }
    ?>
    Then in my jQuery that runs at the bottom of my webpage, I have the following code:
    Code:
    $(document).ready(function(){
      // Get the autocomplete label/value pairs
      var autocomplete_source = [];
      $.get("php/autocomplete_source.php", function(data){
        autocomplete_source = jQuery.parseJSON(data);
      });
    
      //Auto complete the quick_search input
      $('#quick_search').autocomplete({
        source: autocomplete_source,
        minLength: 3,
        select: function( event, ui ) {
          // Debugging, simply alert what was selected
          alert("Selected: " + ui.item.label + " Household ID: " + ui.item.value );
        }
      });
    });
    I verify that the JSON is being returned in the $.get function, but whenever I start typing and get past my 3rd character I get "No search results.".
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    Re: jQueryUI - Autocomplete

    I figured out what was going on, I moved the .autocomplete code inside the get function:
    Code:
    $(document).ready(function(){
      var autocomplete_source = [];
      $.get("php/autocomplete_source.php", function(data){
        autocomplete_source = $.parseJSON(data);
        
        $('#quick_search').autocomplete({
          source: autocomplete_source,
          minLength: 0,
          select: function( event, ui ) {
            alert("Selected: " + ui.item.label + " Household ID: " + ui.item.value );
          }
        });
      });      
    });
    Last edited by dday9; Oct 18th, 2017 at 09:07 AM.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  3. #3
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: [RESOLVED] jQueryUI - Autocomplete

    I believe SELECT is called when you pick an item - you are not getting that far.

    What does your DATA look like?

    It should be an array of objects - like this:

    [{"label":"aaaona, Laura","value":"laaaona"},{"label":bbbell, Michelle","value":"mbbbell"},{"label":"Br

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

Posting Permissions

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



Click Here to Expand Forum to Full Width