Question

I am using twitter bootstrap typehead.

 $(document).ready(function() {
        $("#searchfield").typeahead({
            minLength: 3,
            source: ["type1", "type2", "dtype3", "dtype4"]
        });
    });

I want to display all the soucre in the drop down(suggestion drop down), when I focused on input tag (“#searchfield”) even it is empty. That means I want all source to display when I didn’t enter any letter. If I entered any letter it needs to show the relevent data (normal functionality of typehead.)

OR

On clicking on some link. dropdown need to provide all given source.
Example:

<a href="#someId">Click here to populate typehead in #searchfield input tag </a>
<input type="text" id="searchfield">

On cliking the link, the input field needs to populate the dropdown with all given sources(type1, type2, dtype3,dtype4)

Answer 1

I changed the following method in the plugin like this

, lookup: function (event) {
      var that = this
        , items
        , q

      this.query = this.$element.val()

    //console.log(this.query);
    //alert("this.query"+ this.query);

      if (!this.query) {
         return this.shown ? this.hide() : this
      }

      items = $.grep(this.source, function (item) {
       if this.query == "*"
          return item
       else
          return that.matcher(item)

      })

        //console.log("==items=="+items.length);
        //console.log(items);

      items = this.sorter(items)

       if (!items.length) {
        return this.shown ? this.hide() : this
      }

      return this.render(items.slice(0, this.options.items)).show()
    }

And binded the click event to anchor tag(<a id="someID" ......)

jQuery('#someID').click(function(){
     var $input = $("#seachfield");
     //add something to ensure the menu will be shown
      $input.val('*');
      $input.typeahead('lookup');
      $input.val('');


});

Hope this may help to others..