How to filter a JSON array in autocomplete jquery and show a dynamic value in JavaScript?

Question

I have successfully implemented the jQuery Autocomplete function in my HTML input filed, it returns an array of JSON objects, what I would like to achieve is the following:

click on an item of the dropdown list
filter such item's string to get only the objID string.

So, here's my js code:

$.ajax({
   url: "<?php echo $pointerClass ?>.json",
   type: "POST",
   dataType: "JSON"
   }).done(function(data){
      var jsonData = data;
      var arr = new Array();

      var keys = Object.keys(jsonData);
      for(var i=0; i<keys.length; i++){
         var key = keys[i];
         var jString = JSON.stringify(jsonData[key]);
         arr.push(jString);
      }// ./ for
      console.log('arr: ' + arr[0]);

      // autocomplete jquery function
      $( "#ar-type-pointer-objID" ).autocomplete({
         source: arr,
         minLength: 1
      });
    });

Here's a screenshot of my drop-down menu:

As you can see by the red frame, I need to click on an item and pass only the "objID" value to my input field, so it'll be "qO19zg8mV4" since I'm clicking on the row in the red square.

Here's how my input should look like after clicking on a drop-down's row:

Lorenzo S · Accepted Answer · 2018-09-21 09:15:36Z

1

According to the autocomplete documentation, you have two interesting events: select and close.

select is

Triggered when an item is selected from the menu. The default action is to replace the text field's value with the value of the selected item

close is:

Triggered when the menu is hidden. Not every close event will be accompanied by a change event.

Select has two parameters:

event
ui

ui is an object like this:

item: {
  label: string,
  value: string
}

Not sure where you will get your JSON, probably value, so I assume that...do a console.log to be sure of it!

You should rewrite with something like

$( "#ar-type-pointer-objID" ).autocomplete({
  source: arr,
  select: function(event, ui) {
    const target = event.target;
    const val = JSON.parse(ui.item.value); // Check if decode is needed or is already passed as an object
    jQuery(target).val(val.ObjID);
    event.preventDefault();
    return false;
  }
});

We prevent the default, because "The default action is to replace the text field's value with the value of the selected item." and your change in the input field will be lost. You still have to manage some info by yourself but the idea should be enough!

edited Sep 21, 2018 at 9:15

answered Sep 21, 2018 at 8:21

Lorenzo S

1,41715 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Frank Eno Over a year ago

thanks for this awesome answer, although I get this error in the console: Uncaught TypeError: JSON.decode is not a function

Frank Eno Over a year ago

PS: the thing of it that my "arr" array is made by strings, I get them from this code: var jString = JSON.stringify(jsonData[key]); arr.push(jString);

Frank Eno Over a year ago

genius! Thanks so much, you saved my day ;)

Frank Eno Over a year ago

i may further need you, is it possible to get in touch with you? If not, i’ll understand ;)

Lorenzo S Over a year ago

I think that asking to the whole community will give you a much faster and probably better answers than mine...or you will get mine anyway! ;)

Collectives™ on Stack Overflow

How to filter a JSON array in autocomplete jquery and show a dynamic value in JavaScript?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related