HTML Раскрывающееся окно с поиском и вводом - PullRequest
Новая
       76

HTML Раскрывающееся окно с поиском и вводом

0 голосов
/ 06 августа 2020

Я пытался найти то, что мне нужно, и это самое близкое, что я могу найти:

Сделайте раскрывающийся список с полем поиска, используя jQuery (от Yoge sh Сингх) https://makitweb.com/make-a-dropdown-with-search-box-using-jquery/

  • Он может предоставить HTML раскрывающийся список с возможностью поиска.
  • Однако я надеюсь, что у меня будет также возможность ввода . Т.е., если ничего не найдено, используйте в качестве результата пользовательский ввод.

Я пытался посмотреть код, 

$(document).ready(function(){
 
  // Initialize select2
  $("#selUser").select2();

  // Read selected option
  $('#but_read').click(function(){
    var username = $('#selUser option:selected').text();
    var userid = $('#selUser').val();

    $('#result').html("id : " + userid + ", name : " + username);

  });
});

UPDATE: используя datalist. Требование:

  • если найдено, используйте найденное значение в качестве результата.
  • если ничего не найдено, используйте в качестве результата ввод пользователя.

Возможно это один и тот же случай, но я не знаю, js хорошо, чтобы это сказать. 

     $(document).on('change', '#place', function () {
         $("#fax").val($("#place").val());
      });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="place" list="places">
    <datalist id="places">
        <option value="WVC" label="503-882-1212"></option>
        <option value="HAM" label="612-883-1414"></option>
        <option value="WON" label="317-445-8585"></option>
    </datalist>
    <br>
    <input type="text" id="fax">

Я не вижу простого способа сделать это сам, так как не знаю js достаточно хорошо. Можно ли использовать ввод пользователя в качестве результата, если ничего не найдено? спасибо

1 Ответ

1 голос
/ 06 августа 2020

<datalist> похож на отдельный элемент select и связан с предыдущим текстовым полем и просто обновляет значение текстового поля в зависимости от того, что выбрано. Если вы хотите запускать свой код на основе события изменения в текстовом поле, вам нужно сначала прочитать datalist, а затем выбрать из него метку. Если значение отсутствует, выберите текст из текстового поля. 

$(document).ready(function () {

    $(document).on('change', '#place', function () {
        let myString = 
               $(this).next().find("option[value='" + $(this).val() + "']").prop("label");
        myString = myString ? myString : $(this).val();
        $("#fax").val(myString);
        $(this).val(myString); //IF YOU LIKE TO SHOW SAME STRING IN TEXT FIELD TOO
    });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input type="text" id="place" list="places">
    <datalist id="places">
        <option value="WVC" label="503-882-1212"></option>
        <option value="HAM" label="612-883-1414"></option>
        <option value="WON" label="317-445-8585"></option>
    </datalist>
    <br>
    <input type="text" id="fax">
...