JavaScript function returns NaN when retrieving data-id from datalist option

Question

I'm trying to find a value of data-id from selected option in data list. I have a function which returns correct value but also is giving me a popup with 'NaN'. As a standard response to my problem I'm using 'intParse' or 'isNaN' function but nothing seems to stop returning 'NaN'
So I got two alerts . First with the correct value, and second with 'NaN' when calling this function.

$("#EducationEstablishment").on('input', function() {
  var id = GetDataListOptionValue(EducationEstablishment, establishments);
  alert(id)
});

function GetDataListOptionValue(datalistInputId, dataListId) {

  var x = $(datalistInputId).val();
  var z = $(dataListId);
  var val = $(z).find('option[value="' + x + '"]');
  endval = val.attr('data-id');

  var num = isNaN(parseInt(endval)) ? 0 : parseInt(endval)
  return (num);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="EducationEstablishment" list="establishments" type="text">
<datalist id="establishments">
  <option data-id="100018962" value="Instituto Tecnologico De Buenos Aires"></option>
  <option data-id="100084386" value="National University of Cordoba, Argentina"></option>
</datalist>

First of all, you have some unbalanced parentises. I assume those were just _typos_. — ibrahim mahrir, Feb 01 '17 at 16:25
Yes, it is working. But after giving correct value it is giving an extra dialog with a 'NaN' message — mirosz, Feb 01 '17 at 16:48
check the sinppet I created in the answer. It just your code and It's working. — ibrahim mahrir, Feb 01 '17 at 16:53
Thanks. Looks like the problem might be somewhere else then. I'm calling this function when the datalist is changed. Please see my edited question — mirosz, Feb 01 '17 at 17:15
I don't understand arguments in this call: `GetDataListOptionValue(EducationEstablishment, establishments)` are they strings? `GetDataListOptionValue('EducationEstablishment', 'establishments')` — num8er, Feb 01 '17 at 17:27
Yeah, now I can see that the error is only in my app . Snippets are working here. Thanks — mirosz, Feb 01 '17 at 18:04
It looks like the code is working fine (snippet above). Problem must be with some other code in my app. Because after pasting exactly the same code in my app, my problem start again. Thanks — mirosz, Feb 01 '17 at 18:11

num8er · Answer 1 · 2017-02-01T18:19:07.217

As I understood You want to get data-id field from options while user is typing something.

So check this code:

$("#EducationEstablishment").on('input', function () {
  var id = findDataIdInDataList($(this).data('list'), $(this).val());
  
  $('#EducationEstablishmentDataId').text(''); 
  if(id > 0) {
    $('#EducationEstablishmentDataId').text(id);
  }
});


function findDataIdInDataList(dataListSelector, value) {
  var $dataList = $(dataListSelector);
  if(!$dataList) return 0;
  
  var $selectedOption = $dataList.find('option[value="'+value+'"]:first');
  if(!$selectedOption) return 0;
  
  return parseInt($selectedOption.data('id')) || 0;
}

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


<input id="EducationEstablishment" data-list="#establishments" type="text" value=""> <br/>
Data ID: <span id="EducationEstablishmentDataId"></span>

<br/><br/>
paste this into input above: <b>National University of Cordoba, Argentina</b>

<datalist id="establishments">
  <option data-id="100018962" value="Instituto Tecnologico De Buenos Aires"></option>
  <option data-id="100084386" value="National University of Cordoba, Argentina"></option>
</datalist>

and another one when user types it finds first occurrence of that value in datalist:

$("#EducationEstablishment").on('input', function () {
  var ids = findDataIdsInDataList($(this).data('list'), $(this).val());
  
  $('#EducationEstablishmentDataId').html(''); 
  if(ids.length > 0) {
    $('#EducationEstablishmentDataId').html(ids.join(', '));
  }
});


function findDataIdsInDataList(dataListSelector, search) {
  var $dataList = $(dataListSelector);
  if(!$dataList) return [];
  
  var $foundOptions = $dataList.find('option').filter(function() {
    return $(this)
             .attr('value')
             .toLowerCase()
             .indexOf(search) > -1;
  });
  if(!$foundOptions) return [];
  
  var ids = [];
  $foundOptions.each(function() {
    var id = parseInt($(this).data('id'));
    if(id) ids.push(id);
  });
  return ids;
}

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


<input id="EducationEstablishment" data-list="#establishments" type="text" value=""> <br/>
Data ID: <span id="EducationEstablishmentDataId"></span>

<br/><br/>
type anything: <b>Argentina</b> or <b>Insti</b>

<datalist id="establishments">
  <option data-id="100018962" value="Instituto Tecnologico De Buenos Aires"></option>
  <option data-id="100084963" value="Instituto Tecnologico De Argentina"></option>
  <option data-id="100084386" value="National University of Cordoba, Argentina"></option>
</datalist>

After modifying function with your code I got "Uncaught Error: Syntax error, unrecognized expression: #[object HTMLInputElement]" In Chrome console — mirosz, Feb 01 '17 at 16:16
Yes, It works fine on button click. I need to retrieve the value on datalist changed (see my edited question ) and that for some reason returning extra NaN — mirosz, Feb 01 '17 at 17:44
@mirosz so You wanted to get id when value that was entered by user exist in datalist? so check my answer. just copy paste, or input by hand. — num8er, Feb 01 '17 at 18:00

score 1 · Answer 2 · edited Feb 01 '17 at 16:27

1

With native javascript:

var x = document.getElementById(datalistInputId).value;
var z = document.getElementById(dataListId);
var val = z.querySelector('option[value="' + x + '"]');
var num = val.dataset['id'];          
return (parseInt(num) || 0);

edited Feb 01 '17 at 16:27

Philip Kirkbride

21,381
38
125
225

answered Feb 01 '17 at 16:20

Marc Puigventós Sanz

188
8

score 1 · Accepted Answer · edited May 23 '17 at 10:29

First of all, you are using Automatically Created Variable, which may be not supported by your browser or something. The ACV you're using are EducationEstablishment and establishments. So what you should do is get rid of those and select your input using jQuery like this:

$("#EducationEstablishment").on('input', function() {
  // instead of passing those ACVs, we will pass IDs instead (IDs are strings)
  var id = GetDataListOptionValue("#EducationEstablishment", "#establishments");
  alert(id)
});

// instead of getting two ACVs, get IDs then select the elements properly
function GetDataListOptionValue(datalistInputId, dataListId) {

  // datalistInputId will be something like this "#datalisInput"
  var x = $(datalistInputId).val();
  // same here
  var z = $(dataListId);
  var val = $(z).find('option[value="' + x + '"]');
  endval = val.attr('data-id');

  var num = isNaN(parseInt(endval)) ? 0 : parseInt(endval)
  return (num);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="EducationEstablishment" list="establishments" type="text">
<datalist id="establishments">
  <option data-id="100018962" value="Instituto Tecnologico De Buenos Aires"></option>
  <option data-id="100084386" value="National University of Cordoba, Argentina"></option>
</datalist>

Yes, It works fine on button click. I need to retrieve the value on datalist changed (see my edited question ) and that for some reason returning extra NaN — mirosz, Feb 01 '17 at 17:52
Once I have replaced ACV with strings as you suggested everything is working fine. It is still a bit of a mystery though. Those snippets here are working fine even with ACV in the same browser. Anyway, thank you ! — mirosz, Feb 02 '17 at 09:33
You're welcome! And code snippets have a lot going on in them that we don't see. So maybe they are creating them. Plus this is just a portion of your script. If the rest of it use `"strict mode"` then these AVCs won't get created. — ibrahim mahrir, Feb 02 '17 at 09:39

JavaScript function returns NaN when retrieving data-id from datalist option

3 Answers3