Pick up Input value

Question

I know the title makes it sound like you already have millions of this question, but come on.

My case works like this, I have a Datalist so I can autocomplete searching in an array of objects. When I take this array, it will return me one of the items and this item I will search for his html, html that is with the same name as the item.

The question is, how do I get only one of the values? The value that is written in Input??

jsonOptions = [
				{"product": "22222", "description": "description 2"}, 
				{"product": "33333", "description": "description 3"}, 
				{"product": "44444", "description": "description 4"}, 
				{"product": "55555", "description": "description 5"}, 
				{"product": "66666", "description": "description 6"},
				{"product": "77777", "description": "description 7"}
				
			  ]; 
								  
$(document).ready(function() {
        
			var dataList = document.getElementById('json-datalist');							  
	
							  
								  
	jsonOptions.forEach(function(item) {
		
		var option = document.createElement('option');
      
		option.value = item.description;
		option.text = item.product;
		option.setAttribute('data-product', item.product);
		dataList.appendChild(option);
    });
	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" list="json-datalist" placeholder="Nome ou Número">
<datalist id="json-datalist"></datalist>

Look at the code, it’s very simple.. What I want to do is take the description value and use it as a parameter to search for an html page.. I also need that Production that looking for the number will also be an option.

Answer 1

Add the event input to the countryside.

var inp = document.querySelector('input');
inp.addEventListener('input', function() {
  var value = this.value;
  var opt = [].find.call(this.list.options, function(option) {
    return option.value === value;
  });
  if(opt) {
    alert('Product: ' + opt.textContent + '\nDescription: ' + opt.value);
  }
});

See working

jsonOptions = [
  {"product": "22222", "description": "description 2"}, 
  {"product": "33333", "description": "description 3"}, 
  {"product": "44444", "description": "description 4"}, 
  {"product": "55555", "description": "description 5"}, 
  {"product": "66666", "description": "description 6"},
  {"product": "77777", "description": "description 7"}

]; 

$(document).ready(function() {
        
  var dataList = document.getElementById('json-datalist');							  

  jsonOptions.forEach(function(item) {

    var option = document.createElement('option');

    option.value = item.description;
    option.text = item.product;
    option.setAttribute('data-product', item.product);
    dataList.appendChild(option);
  });
  
  var inp = document.querySelector('input');
  inp.addEventListener('input', function() {
    var value = this.value;
    var opt = [].find.call(this.list.options, function(option) {
      return option.value === value;
    });
    if(opt) {
      alert('Product: ' + opt.textContent + '\nDescription: ' + opt.value)
    }
  });
	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" list="json-datalist" placeholder="Nome ou Número">
<datalist id="json-datalist"></datalist>

References

• find
• call
• input