CODEWITHSUNDEEP
javascripthtml
Diego Avila
Diego Avila

Reputation: 738

how create autocomplete with datalist

i'm try to create a autocomplete with datalist html this is my code:

<input type="text" id="options" name="options" list="list_option">
<datalist id="list_option">
  <option value="1">Op1</option>
  <option value="2">Op2</option>
</datalist>
<input type="button" onclick="data($('#options').val());" value="getId">
<script>
function data(term){
alert(term);
}
</script>

the list show correct the problem is if i select a item from my datalist on the input show the value, dont the name... and how i can get this value(id).. please any suggest..thanks

Upvotes: 0

Views: 1149

Answers (1)

zer00ne
zer00ne

Reputation: 43910

"...dont the name... and how i can get this value(id)."

I have no idea what you mean...or how it relates to autocomplete.

The following Demo will run callback function getData() when the change event is fired on #options. The console (not alarm because it's irritating) will log two items:

  1. Text Box Value

Run callback function getID() when the click event is fired on :button. The console will log:

  1. Text Box ID
  2. Data List ID

As for autocomplete behavior, you just add the autocomplete attribute to the text box tag or not, because it's on by default. To test it, just type in a letter.

.autocomplete() is not a built-in method of JavaScript or jQuery. You need to load jQuery UI as Mr. Noyon commented or a plugin.

BTW, never use an onclick attribute event handler when you have jQuery loaded. That's like pushing a car instead of driving it.

Demo

$('#options').on('change', getData);
$(':button').on('click', getID);

function getID(event) {
  var textID = $('#options')[0].id;
  var listID = $('#list')[0].id;
  console.log('Text Box ID: #' + textID);
  console.log('List ID: #' + listID);
}

function getData(event) {
  var val = this.value;
  console.log('Text Box Value: ' + val);
}
<input type="text" id="options" name="options" list="list" autocomplete>
<datalist id="list">
  <option value='wallet'>wallet</option>
  <option value='hair'>hair</option>
  <option value='coasters'>coasters</option>
  <option value='book'>book</option>
  <option value='clay pot'>clay pot</option>
  <option value='twezzers'>twezzers</option>
</datalist>

<input type='button' value='getID'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 0

Related Questions