JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<input type="button" value="загрузить список" id='btn'>


<hr>
<input class='search' type="search" list="fields_list" placeholder="Поиск поля..." class="container" id='search_box'>
<datalist id="fields_list" class="list"></datalist> →
<input type="text" id='result' disabled>
<hr>

CSS

@import url('https://fonts.googleapis.com/css?family=Ubuntu');
.search {
  font-family: 'Ubuntu', sans-serif;
  font-size: 1em;
  font-weight: bold;
  height: 30px;  
}

JavaScript

/*********************************************************************************/
var _searchMapField = (function(){
	// privat 
  
  //public 
  return {
  	loadFieldList: function(fieldList/*array of string*/){
    	let fieldsDataList = document.getElementById('fields_list');
      let opt = '';
      for (let i in fieldList) {
        //options.push('<option value="'+fieldsList[i]+'" /></option>');    
        opt += '<option value="' + fieldList[i] + '" /></option>';
      }
      fieldsDataList.innerHTML = opt;
    }
  }
})();
/*********************************************************************************/


let btn = document.getElementById('btn');
btn.onclick = reloadDataList;

let search_box = document.getElementById('search_box')
search_box.onchange = onSearchChange;

function reloadDataList(oEvent) {
  console.log('click');
  let fieldsList = initFields();
  let fieldsDataList = document.getElementById('fields_list');
  //let options = [];
  let opt = '';
  for (let i in fieldsList) {
    //options.push('<option value="'+fieldsList[i]+'" /></option>');    
    opt += '<option value="' + fieldsList[i] + '" /></option>';
  }
  //fieldsDataList.innerHTML = options
  fieldsDataList.innerHTML = opt;
  console.log(fieldsDataList);
}

function onSearchChange(oEvent) {
  document.getElementById('result').value = document.getElementById('search_box').value
}

// пример данных-----------------------------------------
function initFields() {
  let fields = [];
  /* //получение списка полей
  FieldsModule.getFieldsMapObject().forEach(function(fieldObject) {
    fields.push(fieldObject.getData().field_id);
  });
  */

  return fields = [
    'OR-01-01-02-0002',
    'OR-01-03-11-0001',
    'BL-06-06-11-0011',
    'BL-06-06-13-0041',
    'BL-06-05-47-0003',
  ]
}