Jump to content

Updating Textbox2 based on Textbox1 Autocomplete


Moorcam
Go to solution Solved by requinix,

Recommended Posts

Hi guys,

Back to annoy you again. Sorry :)

I am getting information from the Database to textbox1 (location_name), which uses an autocomplete. This works lovely.

Now, what I want to do is, in textbox2 (location_phone) is have the phone number associated with the value of textbox1 to show in textbox2 automagically. 

Here is the HTML of both fields:

                         <div class="row form-group">
                          <div class="col-6">
                        <div class="form-group"><label for="location" class=" form-control-label">location</label>
                        <input type="text" id="location" name="location" value="<?php echo $row['location']; ?>" class="form-control">
                        </div>
                        </div>
                        <div class="col-6">
                        <div class="form-group"><label for="price" class=" form-control-label">Location Phone</label><input type="text" id="location_phone" name="location_phone" value="<?php echo $row['location_phone']; ?>" class="form-control"></div>
                        </div>
                        </div>

Here is the php in autocomplete.php:

<?php
include('config.php');

if (isset($_GET['term'])) {
     
   $query = "SELECT * FROM locations WHERE location_name LIKE '{$_GET['term']}%' LIMIT 25";
    $result = mysqli_query($con, $query);
 
    if (mysqli_num_rows($result) > 0) {
     while ($row = mysqli_fetch_array($result)) {
      $res[] = $row['location_name'];
     }
    } else {
      $res = array();
    }
    //return json res
    echo json_encode($res);
}

And, finally, the Austocomplete script, which helps to populate textbox1:


  $(function() {
     $( "#location" ).autocomplete({
       source: 'includes/autocomplete.php',
     });
  });

If anyone can help put this one to bed I would be so grateful and will buy you a Guinness sometime ;)

Cheers.

Link to comment
Share on other sites

  • Solution
$query = "SELECT * FROM locations WHERE location_name LIKE '{$_GET['term']}%' LIMIT 25";

Stop that. You have mysqli so use its prepared statements.

 

If you want the phone number to show up somewhere then you're going to have to return it with your AJAX. Look into the documentation for your autocomplete plugin to see how you should proceed.
For example, one possibility is that your AJAX (autocomplete.php) returns an array of [location_name, phone number], you tell the plugin that it should use the "location_name" value, and you provide a callback function when an entry is selected so you can take the phone number and set it in the textbox.

Link to comment
Share on other sites

1 hour ago, requinix said:

$query = "SELECT * FROM locations WHERE location_name LIKE '{$_GET['term']}%' LIMIT 25";

Stop that. You have mysqli so use its prepared statements.

LOL I know right. I will, I promise. Some day you will be proud. lol

I will look into the other stuff. Thanks mate.

Link to comment
Share on other sites

This appears to work

script

<script type='text/javascript'>
 $(function() {
     $( "#location" ).autocomplete({
       source: 'autosearch.php',
       select: function(event, ui) {
           event.preventDefault()
           $("#location").val(ui.item.label)
           $("#location_phone").val(ui.item.value)
       }
     });
  });
 </script>

autosearch.php

if (isset($_GET['term'])) {
    $res = $conn->prepare("SELECT concat(user_firstname,' ',user_lastname) as label
                                 , user_phone as value
                           FROM users
                           WHERE concat(user_firstname,' ',user_lastname) LIKE ?
                          ");
    $res->execute([ $_GET['term'].'%' ]);
    $data = $res->fetchAll(PDO::FETCH_OBJ);
    exit(json_encode($data));
}

 

Link to comment
Share on other sites

9 hours ago, DanEthical said:

I will, I promise. Some day you will be proud. lol

Stop that. Do it now. It does not have to be all-or-nothing, it's okay if older parts of your code don't and the newer parts do.

Like Barand's code shows, it's easy to implement. No excuse for not doing it.

Link to comment
Share on other sites

  • 3 months later...

Hello guys,

Been a while. Between travelling half the bloody country, being sick and travelling again (work), I finally got time to sit down and look into this issue.

Got it to work by using the following array in my php code:

$res[] = array("value"=>$row['location_phone'],"label"=>$row['location_name']);

My next goal is to make you guys so proud. 😂 Yes, I am going to use my upcoming leave from work to change all my code to prepared.

Thanks so much for all your help and advice thus far.

On 3/20/2021 at 7:47 PM, requinix said:
$query = "SELECT * FROM locations WHERE location_name LIKE '{$_GET['term']}%' LIMIT 25";

Stop that. You have mysqli so use its prepared statements.

 

If you want the phone number to show up somewhere then you're going to have to return it with your AJAX. Look into the documentation for your autocomplete plugin to see how you should proceed.
For example, one possibility is that your AJAX (autocomplete.php) returns an array of [location_name, phone number], you tell the plugin that it should use the "location_name" value, and you provide a callback function when an entry is selected so you can take the phone number and set it in the textbox.

I had to reread what you said about using the ajax plugin to set the phone number to a text box upon selection of location name.

Thanks so much for this.

Dan

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.