Подсказка при заполнении input на JS

Гугл по autocomplete выдаст кучу вариантов.

Jquery autocomplete

https://jqueryui.com/autocomplete/

Я не знаю синтаксиса JS и не смогу вставить что-то без ошибок в свой код 🙁

Гуглил, читал, вот что понял из прочитанного.

Нужно из полученного ответа создать массив и передать его в форму.

Попытался сделать это так изменив действующий код (выделил жирным)

jQuery(document).ready(function() {
$("#search").autocomplete({
    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('');
var suggestions = [];
                    jQuery.each(res, function (n, item) {
suggestions.push(item.name);
                            jQuery('#search-results').append('<div class="mod-row">'+ item.name +'</div>');
                    });
 add(suggestions);
                    if(res) {
                        jQuery('#search-results').show();
                    }else{
                        jQuery('#search-results').hide();
                    }                 

                }
            });
        }
    });
 });
});

В итоге и поиск перестал работать и автокомплит не заработал (((

Нет наверное нужно сделать что-то вроде этого:

jQuery('#search-results').on('click', 'div.mod-row', function(e){

   jQuery('#search').val( jQuery(this).text() );

    });

Вместо #search селектор того инпута куда текст вставить нужно.

Про автокомплит что-то не дочитали. Примерно так должно быть

jQuery(document).ready(function() {


	$("#search").autocomplete({

		position: {

			my: "left top",

			at: "left bottom",

			collision: "none",

			offset: "1 4"

		},

		source: function (e, t) {


			var name = jQuery(this).val();

			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 (e) {


					t($.map(e, function (e) {

						return {

							name: e.name,

						}

					}))


				}

			});


        },

		minLength: 2

		}).data("ui-autocomplete")._renderItem = function (e, t) {

			return $("<li></li>").data("item.autocomplete", t).append("<i class="">" + t.name + "</i>").appendTo(e);

		};


});

В итоге методом тыка сделал так, выкинул лишнее, внутри все собираю пушем в архив, а автокомплит отдельной функцией, все работает:

  var suggestions = [];
    function nameSearch()
    {
        $( "#search" ).autocomplete({
            source: suggestions
        });
    }

    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) {
suggestions.push(item.name);
                        });
                    }
                });
            }
        });
    });

и в инпут еще добавил

Проще же можно _jsfiddle.net/60v9ebmw/

onep, а как в ваш последний пример корректно вставить?

И еще вопрос — трижды встречающееся #search — это id инпута?

Так же как и в вашем коде вставляйте _jsfiddle.net/m01g92j4/1/

Да, <input id=»search» type=»text» />

Ваш

и

из примера — это одна и та же функция. Судя по коду, как-то так должно сработать.

jQuery(document).ready(function($) {
  $("#search").autocomplete({
    source: function(e, t) {
      $.ajax({
                    'type': 'GET',
                    'url': '/index.php',
                    'dataType': 'json',
                    'data': {
                        'option': 'com_form',
                        'view': 'item',
                        'format': 'json',
                        'task': 'search',
                        'name': name
                    },
        'success': function(e) {
          t($.map(e, function(e) {
            return {
              value: e.name,
            }
          }))
        }
      })
    },
    minLength: 3,
    select: function (t, n) {
    	$("#search").val(n.item.value)
    }
  }).data("ui-autocomplete")._renderItem = function(e, t) {
    return $("<li></li>").data("item.autocomplete", t).append(t.value).appendTo(e);
  }
});

Именно оно.