Twitter Typeahead

[sunthree74]

why my typeahead doesn't appear when i start to type in textfield? after i install this plugin to my textfield

[Mottie]

Hi @sunthree74!

I set up this demo:

$(function() {
  var substringMatcher = function(strs) {
    return function findMatches(q, cb) {
      // ...
    };
  };

  var $kb = $("#keyboard");
  $kb
    .on("typeahead:select", function(e, suggestion) {
      // update caret position after selection
      $kb.getkeyboard().saveCaret();
    })
    .keyboard({
      usePreview: false,
      stayOpen: true,
      position: {
        my: "top center",
        at: "center bottom",
        at2: "center bottom+200px"
      },
      change: function(e, keyboard) {
        keyboard.$el.typeahead("val", keyboard.$el.val());
      },
      hidden: function(e, keyboard) {
        keyboard.$el.typeahead("close");
      }
    })
    // Init typeahead
    .typeahead(
      {
        hint: true,
        highlight: true,
        minLength: 1
      },
      {
        name: "states",
        source: substringMatcher(states)
      }
    );
});

Note:

• The function run in the typeahead:select event is to set the caret position after a selection is made.
• Set the keyboard usePreview to false, so we are only dealing with the original input.
• Set the keyboard stayOpen to true, so clicking on the typeahead popup doesn't close the keyboard.
• Set the keyboard position to move the keyboard out of the typeahead dropdown. I didn't check if the typeahead dropdown could be moved, as I have done in the jQuery UI autocomplete demo (it's the QWERTY text example).
• The keyboard change callback updates typeahead using the API.
• The keyboard hidden callback hides the typeahead window when the keyboard is closed.
• The typeahead code is from their basic example.