CODEWITHSUNDEEP
javascriptphpjqueryjquery-uiautocomplete
Paolo Porcellato
Paolo Porcellato

Reputation: 51

JQuery UI Autocomplete Obtain two informations from an input

Hi I use the function autocomplete of Jquery UI to get the ingredients that the db contain. Every ingredients have an ID to identify it. How can I do to get this id when an ingredient is chosen? This is the code withe the query to obtain the ingredient 

$(function() {
    var availableTags =
      <?php
        $query="SELECT Id,IngredientsName
        FROM ingredients";
        $result= mysqli_query($connect,$query)
        or die ("Error " . mysqli_error());

        $ingredients=array();
        while ($search=mysqli_fetch_array($result)) {
          $ingredientsName=$search[1];
          $ingredientsId=$search[0];
          array_push($ingredients,"$ingredientsName");
        }
        echo json_encode($ingredients);
      ?>
    ;
    $( "#inputIngredients").on("keyup",".IngName",function(){
      $(".nomeIng").autocomplete({
      source: availableTags,
      minLength: 2});
    });
  });
  </script>

Upvotes: 0

Views: 61

Answers (1)

Jeff B
Jeff B

Reputation: 30099

First, you need to include the information in your availableTags array. You should format the data as an array of objects:

var availableTags = [{
  id: 1,
  label: "Eggs",
}, {
  id: 2,
  label: "Flour",
}, {
  id: 3,
  label: "Milk",
}];

In your PHP, you can do this:

<?php
    $query="SELECT Id,IngredientsName
    FROM ingredients";
    $result= mysqli_query($connect,$query)
    or die ("Error " . mysqli_error());

    $ingredients=array();
    while ($search=mysqli_fetch_array($result)) {
      $ingredient = array( id => $search[0], label => $search[1] );

      array_push($ingredients, $ingredient);
    }
    echo json_encode($ingredients);
  ?>

This will return your data in the above format. You can also add any other fields you desire, but make sure you have a searchable label field.

Then, simply use the id when an option is selected, using the select option. (I don't know what your html looks like, so I simplified the example here):

Simple HTML: 

<input id="inputIngredients">
<input type="hidden" id="ingredient-id">

JavaScript:

$("#inputIngredients").autocomplete({
  source: availableTags,
  minLength: 1,
  select: function( event, ui ) {
        $( "#ingredient-id" ).val( ui.item.id );
        $('#inputIngredients').val( ui.item.label );

        return false;
      }
});

Example fiddle: https://jsfiddle.net/5hf2jaem/1/

To make sure the user selects a valid value, you can set autoFocus: true and add a change handler:

$("#inputIngredients").autocomplete({
  source: availableTags,
  minLength: 1,
  autoFocus: true,
  select: function(event, ui) {
    $("#ingredient").text(ui.item.label);
    $('#inputIngredients').val(ui.item.label);
    $("#ingredient-id").val(ui.item.id);

    return false;
  },
  change: function(event, ui) {
    if (ui.item == null) {
      $("#ingredient").text("");
      $('#inputIngredients').val("");
      $("#ingredient-id").val("");
    }
  },
});

This change handler simply checks that a valid value was selected when the field is blurred.

Demo: https://jsfiddle.net/5hf2jaem/3/

Upvotes: 1

Related Questions