Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Nov 2015
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    jQuery autocomplete, fill multiple fields by selecting suggested option

    I have autocomplete jQuery script working for pulling suggestions from MySQL database when typing in form fields on the page (3 input fields). That is working fine, but what I would like is to when I select suggested option in the first field - all 3 fields should be filled. Fields that I have right now is first name, last name, and company. When I select the first name - last name and company should be automatically filled with data.

    Here's the code:
    Code:
    <html>
    <head>
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">       
            <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
            <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
    $(function() 
    {
     $( "#first_name" ).autocomplete({
      source: 'autocomplete.php'
     });
    });
    $(function() 
    {
     $( "#last_name" ).autocomplete({
      source: 'autocomplete.php'
     });
    });
    $(function() 
    {
     $( "#company" ).autocomplete({
      source: 'autocomplete.php'
     });
    });
    </script>
    </head>
    <body>
    <div id="wrapper">
    
    <div class="ui-widget">
     <p>First name</p>
     <input type="text" id="first_name">
    </div>
    
    <div class="ui-widget">
     <p>Last name</p>
     <input type="text" id="last_name">
    </div>
    
    <div class="ui-widget">
     <p>Company</p>
     <input type="text" id="company">
    </div>
    
    </div>
    </body>
    </html>
    And here's the autocomplete.php file:

    PHP Code:
    <?php

    $host
    ="localhost";
    $username="user";
    $password="password";
    $databasename="dbname";

    $connect=mysql_connect($host,$username,$password);
    $db=mysql_select_db($databasename);

    $searchTerm $_GET['term'];

    $select =mysql_query("SELECT * FROM jemployee WHERE first_name LIKE '%".$searchTerm."%'");
    while (
    $row=mysql_fetch_array($select)) 
    {
    $spojeno $row['first_name'] . ' ' $row['last_name'] . ' ' $row['kompanija'];
    $data[] = $spojeno;
    }
    //return json data
    echo json_encode($data);
    ?>
    So, when the suggested option from "first_name" is selected - "last_name" and "company" should be filled with corresponding data from a database. Any suggestions?

  2. #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,800
    Thanks
    58
    Thanked 684 Times in 679 Posts
    Sounds like this could be tweaked to do that:
    https://jqueryui.com/autocomplete/#custom-data

  3. Users who have thanked xelawho for this post:

    Nightmaster (Aug 6th, 2018)

  4. #3
    New Coder
    Join Date
    Nov 2015
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for your answer. However, I need to full multiple fields based on one selected. I already have working autocomplete itself, I just need to find a way to fill the rest of the fields when first one is selected.

  5. #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,800
    Thanks
    58
    Thanked 684 Times in 679 Posts
    Yes, that's what the linked example does - sets up a custom interface that uses an object to get various pieces of data when a single selection is made.

    Feel free to have another look at the link I posted and ask questions if you're having further trouble

  6. #5
    New Coder
    Join Date
    Nov 2015
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Gotcha! Thank you, I haven't got it when I take a look first time.
    Anyways, my problem is that I'm not familiar with jquery and its syntax, I have no idea how can I $row['first_name'] as a "value" in the script, nor how to I make a while loop, or whatever is needed for jquery to list me all values from the database.

  7. #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,800
    Thanks
    58
    Thanked 684 Times in 679 Posts
    It's been a while since I played around with this (and my php is very rusty), but from memory your php while loop needs to look like this:

    Code:
    while($row=mysql_fetch_array($select)) { 
    $first=$row['first_name'];  
    $last=$row['last_name']; 
    $komp=$row['kompanija']; 
    $spojeno = array('value'=> $first, 'label'=> $last, 'desc'=> $komp);
    $data[] = $spojeno;
    } 
    
    //return json data 
    echo json_encode($data);
    then either:

    store that JSON in a variable when your page loads and put that variable in as the "source" part of the autocomplete (if the returned JSON is not too large)

    or else (if you have a really large data source) use that php as a remote datasource to be dynamically queried as is shown here: https://jqueryui.com/autocomplete/#remote

  8. #7
    New Coder
    Join Date
    Nov 2015
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you once again!
    So the php is not a problem, I now have autocomplete file finished, and it outputs json data, in format:
    Code:
    [{"value":"Nikola","label":"Novakovic","desc":"Bosis"},{"value":"Aleksandra","label":"Lazarevic","desc":""}
    Here's my latest index.html file:

    Code:
    <html>
    <head>
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">       
            <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
            <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
      $(function() {
        $( "#first_name" ).autocomplete({
          minLength: 0,
          source: 'autocomplete.php',
          focus: function( event, ui ) {
            $( "#firstname" ).val( ui.item.value );
            return false;
          },
          select: function( event, ui ) {
            $( "#first_name" ).val( ui.item.value );
            $( "#last_name" ).val( ui.item.label );
    		$( "#company" ).val( ui.item.desc );
     
            return false;
          } 
    	  });
     
      });
    </script>
    </head>
    <body>
    <div id="wrapper">
    
    <div class="ui-widget">
     <p>First name</p>
     <input type="text" id="first_name">
    </div>
    
    <div class="ui-widget">
     <p>Last name</p>
     <input type="text" id="last_name">
    </div>
    
    <div class="ui-widget">
     <p>Company</p>
     <input type="text" id="company">
    </div>
    
    </div>
    </body>
    </html>
    So I managed to have form and it's filling the data in other input fields when specific option is selected.
    However, when I type something in the "first name" field - the dropdown is showing last_name values. When I click on value all fields is filled correctly, but just that drop-down value should be changed to show first name + last name + company value.
    Again, as I'm not familiar with jquery stuff I tried multiple changes, and what I guess should be modifiied is:
    Code:
    focus: function( event, ui ) {
            $( "#first_name" ).val( ui.item.value );
            return false;
          },
    But I have no idea where to go from here. Any suggestion regards how to show first name + last name + company in drop-down?

    Thanks once again, you've been super helpful!

  9. #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,800
    Thanks
    58
    Thanked 684 Times in 679 Posts
    Eyeballing it, you should be able to get away with:
    Code:
    <script>
      $(function() {
        $( "#first_name" ).autocomplete({
          minLength: 0,
          source: 'autocomplete.php',
          focus: function( event, ui ) {
            $( "#firstname" ).val( ui.item.value );
            return false;
          },
          select: function( event, ui ) {
            $( "#first_name" ).val( ui.item.value );
            $( "#last_name" ).val( ui.item.label );
            $( "#company" ).val( ui.item.desc );
     
            return false;
          } 
          })
          .autocomplete( "instance" )._renderItem = function( ul, item ) {
          return $( "<li>" )
            .append( "<div>" + item.value + " " + item.label + " " + item.desc + "</div>" )
            .appendTo( ul );
        };
     
      });
    </script>

  10. Users who have thanked xelawho for this post:

    Nightmaster (Aug 8th, 2018)

  11. #9
    New Coder
    Join Date
    Nov 2015
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    That's exactly what i needed. Thank you! You rock!

  12. #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,800
    Thanks
    58
    Thanked 684 Times in 679 Posts
    Glad you got it sorted.

    You probably spotted this, but the line that actually renders the suggestions is this one:
    Code:
    .append( "<div>" + item.value + " " + item.label + " " + item.desc + "</div>" )
    which as you can see is just appending an html div element with a string inside. So you can css style all or part of it or modify it some other way like you would any other html element.


 

Tags for this Thread

Posting Permissions

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