title: How to filter a JSON array in autocomplete jquery and show a dynamic value in JavaScript?
body: <p>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:</p>
  
  <ol>
  <li>click on an item of the dropdown list</li>
  <li>filter such item's string to get only the <strong>objID</strong> string. </li>
  </ol>
  
  <p>So, here's my js code:</p>
  
  <pre><code>$.ajax({
     url: "&lt;?php echo $pointerClass ?&gt;.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&lt;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
        });
      }); 
  </code></pre>
  
  <p>Here's a screenshot of my drop-down menu:</p>
  
  <p><a href="https://i.stack.imgur.com/aZd5C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aZd5C.png" alt="enter image description here"></a></p>
  
  <p>As you can see by the red frame, I need to click on an item and pass only the <code>"objID"</code> value to my input field, so it'll be <code>"qO19zg8mV4"</code> since I'm clicking on the row in the red square.</p>
  
  <p>Here's how my input should look like after clicking on a drop-down's row:</p>
  
  <p><a href="https://i.stack.imgur.com/yy7eA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yy7eA.png" alt="enter image description here"></a></p>