autocomplete на JS

Question

Мне нужно чтобы при заполнении формы, данные искались в базе и предлагались к выбору. Сам я JS не знаю, но на сайте у меня уже был похожий лайф поиск и я взял код оттуда и немного изменил:

jQuery(document).ready(function() {
    jQuery(document).on('keyup', '#search', function(e) {
        var name = jQuery(this).val();
        if(name.length > 2) {
            jQuery('#search-results').html('');
            jQuery.ajax({
                'type': 'GET',
                'url': '/index.php',
                'dataType': 'json',
                'data': {
                    'option': 'com_form',
                    'view': 'item',
                    'format': 'json',
                    'task': 'search',
                    'name': name
                },
                'success': function (res) {
                    jQuery('.msg').html('');
                    jQuery('#search-results').html('');
                    jQuery.each(res, function (n, item) {
                            jQuery('#search-results').append('<div class="mod-row">'+ item.name +'</div>');
                    });
                    if(res) {
                        jQuery('#search-results').show();
                    }else{
                        jQuery('#search-results').hide();
                    }                 

                }
            });
        }
    });
});

Теперь все работает, слова находит - но как сделать чтобы по одному из найденных слов можно было кликнуть и оно бы вставилось в инпут формы?

Как обернуть '+ item.name +' в autocomplete? Я просто JS совсем не понимаю. Единственное что смог это загуглить что мне нужно - autocomplete, но как его приделать в этот код не понимаю. Помогите, пожалуйста?

Answer 1

Возможно ты имеешь ввиду, что тебе нужен autocomplete в Jquery Ui

    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({source: availableTags});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<label for="tags">Язык программирования: </label><br />
<input id="tags" />

БЛОГ НА HUSL

autocomplete на JS

Ответы (1 шт):