поиск ввода с использованием той же функции в Javascript «выпадающий список» - PullRequest
Новая
       30

поиск ввода с использованием той же функции в Javascript «выпадающий список»

0 голосов
/ 05 октября 2019

Я младший в интерфейсных проектах, использующих javascript, и мне нужно лучшее решение, которое улучшает производительность приложения

Я пытался создать выпадающее меню, используя javascript для всех входных данных, которые имеют атрибут #fetch, чтобы сделатьпользователи выбирают из базы данных, и если значение не найдено, они могут хранить свое собственное значение

. Ниже приведен HTML & JS-код, который я уже создал, но я думаю, что есть много ошибок.

проблем у меня есть:

  1. список не добавлялся в переменную ul

  2. не могу удалить ul i, который был создан, когда код закончил "iпытался скрыть () "но я думаю, что есть лучший способ

  3. всегда, когда выберите одно из значений, он уже меняет первое входное значение

HTML 

<div class="form-group">
  <div class="col-xs-3">
    <div class="input-group">
      <span class="input-group-addon"></span>
      <input type="text" class="form-control fetch" id="fetch" data-url="{{url('/fetch/countries')}}" name="" value="">
    </div>
  </div>
  <div class="col-xs-3">
    <div class="input-group">
      <span class="input-group-addon"></span>
      <input type="text" class="form-control fetch" id="fetch" data-url="{{url('/fetch/governments')}}" name="" value="">
    </div>
  </div>
</div>

JS 


$(".fetch").on('keyup', function(e) {
  $this = $(this)
  $keyword = $this.val();
  $url  = $this.data('url');

  var checkUl = $this[0].parentElement.parentElement.find('ul');

  if (checkUl == 0) {
    var ul = document.createElement('ul')
    ul.className = 'nav-users push';
    ul.setAttribute("id", "nav");
    $this[0].parentElement.parentElement.append(ul)
  } else {
    $ul = $('#nav')
  }

        $.ajax({
            type:'GET',
            data: {keyword : $keyword},
            dataType:'json',
            url:$url,
            success:function(rData) {
              $ul.empty();
                rData.forEach(function(returnData) {
                  var a = `
                  <a >
                      <i class="${returnData.icon} text-success"></i> <label id="name">${returnData.name}</label>
                      <div class="font-w400 text-muted"><small id="value" >${returnData.id}</small></div>
                  </a>
                  `
                  var li = document.createElement('li')
                  li.innerHTML = a
                  ul.append(li)

                  li.addEventListener('click', selectValue)

                })
            }
        });
    })


function selectValue(event) {
          var listClicked = $(this);

          var name = listClicked.find('#name')[0].innerText;
          var value = listClicked.find('#value')[0].innerText;
          var icon = listClicked.find('i')[0].className;
          var field = $("#fetch")[0]

          var i = document.createElement('i')
          i.className = icon
          field.value = name;

          var ul = $('#nav');
          ul.hide();
        }
...