Программный запуск отображения результатов typeahead.js

Ответ 1

Кажется, что запускается вход для запуска.

$(".typeahead").eq(0).val("Uni").trigger("input");

Протестировано на странице .

Ответ 2

Согласно моим тестам (см. fiddle), метод focus() необходим для отображения выпадающего списка. Итак:

theVal = $('.typeahead').val();
$(".typeahead").typeahead('val', '')
$(".typeahead").focus().typeahead('val',theVal).focus();

• В строке 1 мы назначаем текущее значение ввода Typeahead переменной theVal;
• В строке 2 мы просто reset вычисляем значение typeahead; и
• В строке 3 мы возвращаем исходное значение и фокус, что приводит к отображению выпадающего меню, как если бы пользователь набрал что-то.

Я действительно нуждался в этом, чтобы настоятельно рекомендовать пользователям выбирать из предложений Bloodhound, исходящих из API API геокодирования, чтобы я мог обеспечить, чтобы координаты были получены клиентом до отправки формы.

Ответ 3

$(".typeahead").typeahead('lookup').focus();

с существующим значением ввода. вы можете изменить значение заранее, конечно

Ответ 4

Как и Typeahead v0.10.1, изменение значения typeahead вызовет другой запрос и откроет раскрывающееся меню:

var val = $(".typeahead").typeahead('val');
$(".typeahead").typeahead('val', '');
$(".typeahead").typeahead('val', val);

Ответ 5

Кому-то, кто нашел эту проблему с twitter typeahead после версии 0.11.1, вот как я решил ее с одной строкой:

$(".typeahead-input").typeahead('val', "cookie")
                     .trigger("input")
                     .typeahead('open');

Ответ 6

Я использовал twitter bootstrap typeahead и прописал, что в фокусе откроется список предложений. Ответы здесь не совсем сработали для меня, поэтому я написал эту простую директиву (требуется jquery):

.directive('typeaheadFocusTrigger', function() {
        return {
            limit: 'A',
            link: function(scope, element, attrs) {
                $(element).on('focus', function(e) {
                    var $target = $(e.target);
                    var origVal = $target.eq(0).val();
                    $target.eq(0).val('').trigger('input')
                    .eq(0).val(origVal).trigger('input');
                });
            }
        }
    });

Теперь просто добавьте этот атрибут, и он активирует фокус

<input typeahead-focus-trigger typeahead="">

Ответ 7

Использование: Typeahead v0.10.5

Не использовать: $('.typeahead').typeahead('open');

В настоящее время это не работает. Источник: https://github.com/twitter/typeahead.js/issues/798. В качестве временного исправления используйте пользовательское событие jQuery keydown (после того, как вы создали экземпляр typeahead):

var ttInstance = $('.typeahead').typeahead( config ); // Create Typeahead
ttInstance.typeahead('val', 'pancakes'); // Set an initial value

var evt = jQuery.Event('keydown');
evt.keyCode = evt.which = 40;
ttInstance.trigger(evt); // Opens the dropdown

Ответ 8

Просматривая исходный код, он, как представляется, сохраняет объект TypeaheadView в данных элемента под ключом typeahead. Этот объект TypeaheadView имеет внутренний метод _showDropdown, который внутренне связан с событием фокуса (и несколькими другими). ​​

Я бы не рекомендовал это делать, но вы должны иметь возможность вызвать этот внутренний метод вручную:

$('#yourTypeaheadElement').data('typeahead')._showDropdown();

В качестве альтернативы вы просто попробовали просто сосредоточиться на элементе typeahead при загрузке страницы (после инициализации его как элемента typeahead, конечно):

// after page loads and yourTypeaheadElement is initialized as a typeahead
$('#yourTypeaheadElement').focus();

Ответ 9

Ни один из них не будет работать, если вы не намеренно ставите "typeahead" в классы вашего входного тега. Если вы не чувствуете необходимости делать это (для этого не нужно работать), вам лучше использовать класс, написанный на входном теге, с помощью typeahead.js. Это ".tt-input". Вот пример, который я вырезал из Sam_Butler, перекодированный для нового класса CSS. Это работает для меня в самом современном стиле: 0.10.5:

var theVal = jQuery('.tt-input').val();
jQuery(".tt-input").typeahead('val', 're')
jQuery(".tt-input").focus().typeahead('val',theVal).focus();

Ответ 10

Я взглянул на исходный код и нашел этот недокументированный способ:

var $myinput = $('#myinput');
$myinput.data('typeahead')._showDropdown()

Ответ 11

Это должно работать со "старым" плагином типа bootstrap:

$(".typeahead").eq(0).trigger("keyup");

Не тестировали с IE, к сожалению... Не знаю о новом плагине typeahead...

Ответ 12

Здесь упрощенная версия работы @Sam_Butler: http://jsfiddle.net/rimian/hrnf9

<button type="button" id="button">Crick</button>
<input type="text" id="text" class="typeahead">

JavaScript:

$('#button').click(function() {
  $("#text").focus().typeahead('val', 'London');
});

// instantiate the bloodhound suggestion engine
var locations = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'https://maps.googleapis.com/maps/api/geocode/json?address=%QUERY&components=country:GB&sensor=false&region=uk', //add key
        filter: function (locations) {
            return $.map(locations.results, function (location) {
                return {
                    value: location.formatted_address
                };
            });
        }
    }
});

locations.initialize();

$('#text').typeahead(null, {
    name: 'value',
    displayKey: 'value',
    source: locations.ttAdapter()
});

Ответ 13

Будьте осторожны с этим!

Для тех, кто думает о триггерных типах поведения вручную (например, при нажатии кнопки), я настоятельно рекомендую вам не делать этого.

Я пришел для этого решения, и я потерял почти целый день, чтобы обходные пути работали правильно (в моем случае это был щелчок на кнопке).

Для тех, кто действительно хочет пойти темным путем, я разделяю с вами свой уродливый код, который заставляет его работать:

//Removes default features of typeahead
//This means that typeahead will not work like an "autocomplete", it only will be trigged when the user Click in #btnSearch button!
var txt = $("#typeahead");
//Save input events in variables (we'll need them)
eventInput = $._data(txt[0], "events").input[0];
eventBlur = $._data(txt[0], "events").blur[1];
//Remove input events
txt.unbind("blur");
txt.unbind("input");

//Set click event that triggers typeahead features manually
$("#btnSearch").click(function () {
    //Clears the cache of engine for it call ajax again, without it when the term was already searched the ajax is not called!
    engine.clearRemoteCache();

    txt.focus(); //When we click in a button, the focus from input is lost, so we set it again to not lose the behaviors of keyboard keys (up, down, tab, etc)
    txt.bind("input", eventInput); //Bind the event that we had saved
    txt.trigger("input"); //Trigger input (like the answer from @epascarello)
    txt.unbind("input"); //Removes it again 
});

//Set event on parent of the suggestion div, this makes the sugestion div close when user click outside it
$("body").click(function () {            
    if (eventBlur != undefined) {
        if ($(".tt-dropdown-menu:visible").length > 0) {
            eventBlur.handler(); //This event closes the suggestion menu
        }
    }
});

Еще одна вещь, которую я сделал, это изменить код события "_ checkInputValue" на typeahead.js. Я изменяю это:

areEquivalent = areQueriesEquivalent(inputValue, this.query);

:

areEquivalent = false;//areQueriesEquivalent(inputValue, this.query);

Я устанавливаю его в false, потому что typeahead не отправляет два одинаковых запроса на сервер. Это происходит, когда пользователь дважды нажимает кнопку поиска (я имею в виду, когда он ищет более одного раза тот же текст, который он уже искал). В любом случае, если вы используете локальные данные, вам не нужно это делать.

Ответ 14

Это сработало для меня.

$( document ).ready(function() {
    $('#the-basics .typeahead').typeahead({
      hint: false,
      highlight: true,
      minLength: 0
    },
    {
      name: 'states',
      displayKey: 'value',
      source: substringMatcher(states)
    });

    //set a value to input to trigger opening
    $(".typeahead").eq(0).val("a").trigger("input");
    //remove value for end user
    $(".typeahead").eq(0).val("");

});

См. здесь, например: http://joshuamaynard.com/sandbox/autocomplete

Ответ 15

Другие ответы были полезны, но не решили мою проблему. Это решение не требует настройки любого из angular -ui-кода и служит только для запуска typeahead для получения результатов при явном нажатии кнопки.

Чтобы сделать это, мне пришлось наложить текстовое поле поверх другого (отключенного) текстового поля, которое является фактическим с помощью typeahead. Никто не узнает, что другой есть, но он должен быть там для angular -ui, чтобы запустить меню в правильном месте. Вы не можете сделать это скрытым полем, потому что оно не сможет отобразить меню в правильном месте.

В приведенной ниже директиве будут отображаться переменные typeaheadText и typeaheadTrigger, чтобы заполнить разбитое поле, когда кнопка запускает это действие (установив триггер в значение true). Директива имеет изолированную область видимости, поэтому она не зависит ни от чего, кроме пропущенного.

directive('typeaheadTrigger', function() {
  return {
    require: ["ngModel"],
    scope: {
      typeaheadText: '=',
      triggerFlag: '='
    },
    link: function(scope, element, attr, ctrls) {
      scope.$watch('triggerFlag', function(value) {
        if (scope.triggerFlag) {
          ctrls[0].$setViewValue(scope.typeaheadText);
          scope.typeaheadText = '';
          scope.triggerFlag = false;
        }
      });
    }
  };
})

Контроллер устанавливает для этого несколько вещей - переменные триггера и текстового поля внутри объекта. Это демонстрирует, как это сделать - в идеале вы бы обернули все это в другую директиву, чтобы он мог использоваться в вашем приложении, скрывая детали.

Здесь plunk: http://plnkr.co/edit/UYjz6F5ydkMQznkZAlfx?p=preview

Ответ 16

Я использовал это для ручного запуска выбора, когда в tt-наборе данных было 1 элемент. Это просто имеет смысл добавить это.

$("#mytypeahead").keyup(function (e) {
                var charCode = (typeof e.which === "number") ? e.which : e.keyCode;
                if (charCode == 13) {
                    if ($(this).parent().find(".tt-dataset").children().length == 1) {
                        //This is how we are submitting a single selection on enter key
                        $(this).parent().find(".tt-dataset").children(0).addClass("tt-cursor");
                        var kde = jQuery.Event("keydown");
                        kde.which = 13;
                        $(this).trigger(kde);                           
                    }    
                }                    
            });

Ответ 17

Я попробовал каждый метод здесь, но он не работал, только с помощью

$(".typeahead").val('hi').trigger('keyup');
$(".typeahead").val('hi').trigger('keydown');

Приведенный выше код работал у меня. Не знаю, что именно произошло, но использование ни одного не сработало, только с помощью обоих это сработало.