JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

Search: <input type="text" id="search">

JavaScript

$(function() {
  var data = [{
      "id": 1,
      "first_name": "Will",
      "last_name": "Smith",
      "created_at": "2015-01-27T13:09:20.243Z",
      "updated_at": "2015-01-27T13:09:20.243Z"
    },
    {
      "id": 2,
      "first_name": "Willem",
      "last_name": "Dafoe",
      "created_at": "2015-01-27T13:17:23.479Z",
      "updated_at": "2015-01-27T13:17:23.479Z"
    }
  ];
  // Below is the name of the textfield that will be autocomplete    
  $('#search').autocomplete({
    // This shows the min length of charcters that must be typed before the autocomplete looks for a match.
    minLength: 2,
    source: function(request, response) {
      var r = [];
      var q = request.term.toLowerCase();
      $.each(data, function(k, v) {
        if (v.first_name.toLowerCase().indexOf(q) != -1) {
          r.push({
            label: v.first_name + " " + v.last_name,
            value: v.ID
          });
        }
      });
      response(r);
    },
    focus: function(event, ui) {
      $('#search').val(ui.item.first_name);
      return false;
    },
    // Once a value in the drop down list is selected, do the following:
    select: function(event, ui) {
      // place the person.given_name value into the textfield called 'select_origin'...
      $('#search').val(ui.item.first_name);
      // and place the person.id into the hidden textfield called 'link_origin_id'. 
      $('#link_origin_id').val(ui.item.id);
      return false;
    }
  });
});