Jquery Autocomplete and MySQL ID Value

Question

hoping someone can help me out with something. I've got a piece of code which allows the Jquery Autocomplete. What I'm wanting to do is to use the ID(primary key) from my MySQL table and then use that to POST on to another screen.

How would I go about getting the ID into a hidden value from the Jquery code?

Here are my snippets.

Jquery

<script>
$(function() {
    $( "#skills" ).autocomplete({
        source: 'JQUERYTEST.php'
    });
});
</script>

Html

 <div class="ui-widget">
    <label for="shop">Shopname: </label>
    <input id="shop">
</div>

Php/MySQL

<?php
    //database configuration
    $dbHost = 'localhost';
    $dbUsername = 'root';
    $dbPassword = '';
    $dbName = 'aurora';

    //connect with the database
    $db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);

    //get search term
    $searchTerm = $_GET['term'];

    //get matched data from skills table
    $query = $db->query("SELECT * FROM shops WHERE shopname LIKE '%".$searchTerm."%'");
    while ($row = $query->fetch_assoc()) {
        $data[] = $row['shopname'] . ' - '. $row['streetaddress'] . ' - ' . $row['postcode'];
    }

    //return json data
    echo json_encode($data);
?>

Thanks!

Try to return a json_encoded assoc array like so: while ($row = $query->fetch_assoc()) { $data[] = array('value'=>$row['id'], 'label' => $row['shopname'] . ' - '. $row['streetaddress'] . ' - ' . $row['postcode']); } — Alex Odenthal
– Alex Odenthal, Commented Mar 1, 2017 at 11:54
nothing :-) It should just work and the autocomplete jquery plugin would build a proper value/label list — Alex Odenthal
– Alex Odenthal, Commented Mar 1, 2017 at 12:15

Ayush · Accepted Answer · 2017-03-01 12:35:46Z

Firstly, you will have to use an Ajax call to get the data from the server. So, change your autocomplete function and add an ajax call to receive a response. Then you will have to loop the JSON array in jquery. I have created the id as the whole string with shopname, streetaddress and postcode. Currently, your code doesn't inserts the ID parameter from the database. You can create an id depending on your needs. Then dynamically I have created the HTML and then placed it inside the <div class="ui-widget">

 <script>
 $( function() {
    $( "#skills" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: "search.php",
          dataType: "jsonp",
          data: {
            term: request.term
          },
          success: function( data ) {
             var html = "";
             $.each(data, function(i, item) {
                  var arr = item.split('-');
                  html += "<label for='shop'>Shopname:"+arr[0]+" </label><input id='"+item+"' type='hidden'><br>";
             }); 

             $('.ui-widget').html(html);

          }
        });
      }
    });
  });
  </script>

Try this out. I hope this helps you.

Collectives™ on Stack Overflow

Jquery Autocomplete and MySQL ID Value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related