Paste input value

Question

Paste input value

Navigation

#1 by (2 votes)

-1

I know the title seems to have millions of this question, but come on.

My case works like this, I have a DataList so I can autocomplete looking in an array of objects. When I get this array, it will return me one of the items and this item I will search for the html of it, html which has the same name as the item.

The question is, how do I get only one of the values? The value that is written in the 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><inputtype="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 get the description value and use it as a parameter to search for an html page. I also need that production that searching the number will also be an option. p>

javascript jquery

asked by anonymous 11.01.2018 / 01:35

1 answer

How to capture specific line of textarea in JS? Problem with 'unique' validation in Laravel

score 2 · Accepted Answer

Add the input event to the field.

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><inputtype="text" list="json-datalist" placeholder="Nome ou Número">
<datalist id="json-datalist"></datalist>

Paste input value

1 answer

See working

References