Typeahead Implementation in PHP/MySQL

DEMO
First, you need to include all the necessary files for this to work. Place these three files in the head section of your page..

  • jquery-1.10.2.min.js 
  • bootstrap.min.js
  • bootstrap3-typeahead.min.js

Then, this script:

$(document).ready(function () {
    var objects = [];
    var map = {};
    $('#person').typeahead({
        source: function (query, process) {
            $.ajax({
                url: 'get_person.php',
                type: 'POST',
                dataType: 'JSON',
                async: true,
                success: function (data) {
                    objects = []; //resets the objects 
                    map = {}; //to avoid duplication
                    $.each(data, function (i, object) {
                        map[object.full_name] = object;
                        objects.push(object.full_name);
                    });
                    process(objects);
                }
            });
        }, //end source
        updater: function (item) {
            $('#first_name').val(map[item].fname);
            $('#middle_name').val(map[item].mname);
            $('#last_name').val(map[item].lname);
            return item;
        }
    }); //end of person typeahead
    $('#person').focus(function () {
        $(this).val('');
    });
});

This is my PHP code in which it passes a JSON object to my index.php file.


header('Content-Type: application/json');
 require_once('connection.php');
 $i=0;
 $query = mysqli_query($GLOBALS["___mysqli_ston"], "select userid,title,first_name, middle_name, last_name from tblperson;");
 $array = array();
 while($row = mysqli_fetch_array($query))
 {
     $i++;
     $userid = $row['userid'];
  $title = $row['title'];
  $fname = $row['first_name'];
  $mname = substr($row['middle_name'],0,1);
  $lname = $row['last_name'];
  $data[$i]['userid'] = $userid;
  $data[$i]['fname'] = $fname;
  $data[$i]['mname'] = $mname;
  $data[$i]['lname'] = $lname;
  $data[$i]['full_name'] = $title.$fname." ".$mname."."." ".$lname;
 }
 echo json_encode($data);

Just click the DEMO link above then copy the JavaScript source.

Comments

Popular posts from this blog

How to Add an Embedded Forum in Blogger

Rendering huge GeoJSON data using leaflet

How to place Ads anywhere in your Post