Автозаполнение поля ввода с помощью JQuery

Question

У меня есть следующая форма:

<form method='post' id='myform'>

    <div class="typeahead__container">
        <div class="typeahead__field">
            <input type="text" class="item" placeholder="Item" id='item' name='input_val'>
        </div>
    </div>

    <input type="text" class="id" placeholder="ID" id='item-id' name='input_val'>

    <button name="button" type="submit" class="btn btn-primary btn-sm f-14 mr-1">SUBMIT</button>
</form>

И следующая функция для обработки живого поиска:

$(document).ready(function(){

  // Defining the local dataset
  $.getJSON('http://127.0.0.1:8000/tst/', function(data) {
    console.log(data)

    let data = {
        "results": [
          { "item": "First",  "id": "1847" },
          { "item": "Second", "id": "4442" },
          { "item": "Third",  "id": "3847" }
        ]
    };

    //LIVE-SEARCH
    $(() => {

      $('#item').typeahead({
        source: {
          data: data.results.map(record => record.item)
        },
        callback: {
          onInit: function($el) {
            console.log(`Typeahead initiated on: ${$el.prop('tagName')}#${$el.attr('id')}`);
          }
        }
      });

    });
    //END LIVE-SEARCH

  });
});

Я хочу добавить еще одну функцию для заполнения значения по умолчанию для ввода поле item-id в соответствии с тем, что пользователь выбирает в поле ввода item. Так, например, если пользователь пишет First, JQuery должен установить значение по умолчанию item-id в 1847 (см. Мой предыдущий блок кода).

Как я могу это сделать? Должен ли я делать это внутри моей функции поиска в реальном времени или я должен использовать другую функцию?

Answer 1

Глядя на ваш код, я предполагаю, что вы используете Bootstrap Typeahead, который использует обратный вызов updater, который мы можем использовать в этой ситуации.

Я разместил это состояние c Json, чтобы принести решение с близким синтаксисом.

Решение 1: Использование Bootstrap Typeahead (может быть полезно кому-то еще)

$(document).ready(function(){

    $('input#item').typeahead({
        
	    source:  function (query, process) {
        return $.get('https://api.myjson.com/bins/hi1oo', function (data) {
        		//console.log(data);
        		//data = $.parseJSON(data);
	            return process(data.results);
	        });
	    },
        display : 'item',
        displayText: function(data){ return data.item;},
        val :  function(data){ return data;},

        updater: function (data) {
            
            $('#item-id').val(data.id);
            return data.item;
            }
        
	}); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js" integrity="sha256-LOnFraxKlOhESwdU/dX+K0GArwymUDups0czPWLEg4E=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<form method='post' id='myform'>

    <div class="typeahead__container">
        <div class="typeahead__field">
            <input type="text" class="item" placeholder="Item" id='item' name='input_val' autocomplete="off">
        </div>
    </div>

    <input type="text" class="id" placeholder="ID" id='item-id' name='input_val'>

    <button name="button" type="submit" class="btn btn-primary btn-sm f-14 mr-1">SUBMIT</button>
</form>

PS: Если ваш json является результатом поискового запроса в реальном времени, где вы ищите названия элементов и получаете данные такого рода. Тогда вам лучше изменить source на что-то вроде следующего:

source:  function (query, process) {
return $.get('inc/ajaxh.php', { query: query }, function (data) {
        return process(data.results);
    });
},

Решение 2: использовать jQuery Typeahead

Этот использует обратный вызов onClickAfter. Обратите внимание, что я внес некоторые изменения в то, как вы отображаете массив ответов ваших данных, и выберите, что будет отображаться, затем используйте item.id в функции обратного вызова.

$(document).ready(function(){

  // Defining the local dataset
  $.getJSON('https://api.myjson.com/bins/hi1oo', function(data) {

    //LIVE-SEARCH
    $(() => {

      $('#item').typeahead({
        source: {
          //data: data.results.map(record => record.item)
          data: data.results
        },
        display: ["item"],
        callback: {
            //I called it itemx to avoid confusion with available "#item"
            onClickAfter: function (node, a, itemx, event) {
                $('#item-id').val(itemx.id);
                //alert('click');
        }
    }
      });

    });
    //END LIVE-SEARCH

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.js" integrity="sha256-q6QA5qUPfpeuxzP5D/wCMcvsYDsV6kQi5/tti+lcmlk=" crossorigin="anonymous"></script>
<form method='post' id='myform'>

    <div class="typeahead__container">
        <div class="typeahead__field">
            <input type="text" class="item" placeholder="Item" id='item' name='input_val'>
        </div>
    </div>

    <input type="text" class="id" placeholder="ID" id='item-id' name='input_val'>

    <button name="button" type="submit" class="btn btn-primary btn-sm f-14 mr-1">SUBMIT</button>
</form>