Question

我试图从数据列表中的所选选项中找到data-id的值。我有一个返回正确值的函数，但也给了我一个带有＆＃39; NaN＆＃39;的弹出窗口。作为对我的问题的标准回答，我使用＆＃39; intParse＆＃39;或者＆＃39; isNaN＆＃39;功能但似乎没有任何东西停止返回＆＃39; NaN＆＃39;
所以我收到了两个警报。首先是正确的值，其次是“NaN＆＃39;调用此函数时。

＆＃13;

$("#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);

}

＆＃13;

<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>

＆＃13;

Answer 1

据我所知，当用户输入内容时，您希望从选项中获取data-id字段。

请检查此代码：

＆＃13;

$("#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;
}

＆＃13;

<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>

＆＃13;

和另一个当用户输入时，它在datalist中找到该值的第一次出现：

＆＃13;

$("#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

使用原生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);

Answer 3

首先，您使用的是Automatically Created Variable，您的浏览器可能不支持。您正在使用的 ACV 是EducationEstablishment和establishments。所以你应该做的就是摆脱那些并使用jQuery选择你的输入：

＆＃13;

$("#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);

}

＆＃13;

<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>

＆＃13;

从datalist选项

3 个答案: