JSFiddle - React, Tailwind, and code Playground

by colemande

HTML

<label>Title:</label>
    <input type="text" name="title" id="title" readonly="readonly" /><br />
    
    <label>First Name:</label>
    <input type="text" name="firstname" id="firstname" /><br />
    
    <label>Last Name:</label>
    <input type="text" name="lastname" id="lastname" /><br />
    
    <label>City:</label>
    <input type="text" name="city" id="city" />

JavaScript

var persons = [

    {
     Title : "Boss",
     FirstName : "Joe",
     LastName : "Blow",
     City : "New York",
    },
    {
     Title : "Employee",
     FirstName : "Larry",
     LastName : "Banks",
     City : "Boston",
    }



];


$(document).ready(function(){

$("#firstname").autocomplete({

    source: $.map(persons,function(i,x){
            return i.FirstName ;
       
    }),
    
    select: function(event, ui){
    
          loadFromFirstName(ui.item.value);      
    
    }
});

});

function loadFromFirstName(firstName){
    
    var thisPerson;
    
    $.each(persons,function(){
            
        if(this.FirstName == firstName){
            thisPerson = this;
        return false;
        }
        
    });
    
    if(thisPerson == undefined){
        return false;                    
    }
    
    $("#title").val(thisPerson.Title);
    $("#lastname").val(thisPerson.LastName);
    $("#city").val(thisPerson.City);
            

}