Rectangle 27 4

$('#remote .typeahead').on('typeahead:selected', function (e, datum) {
    window.location.href = datum.link
});

javascript - typeahead.js search box navigation with enter key - Stack...

javascript jquery typeahead.js
Rectangle 27 18

Here's a Demo in Stack Snippets

Typeahead has changed some of their class names and the above examples are now incorrect.

.tt-suggestion.tt-is-under-cursor
.tt-suggestion:hover
.tt-dropdown-menu
.tt-menu

If you want to borrow the style from the examples page, you can see their stylesheet here:

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {
  width: 422px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}
var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;
 
    // an array that will be populated with substring matches
    matches = [];
 
    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');
 
    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });
 
    cb(matches);
  };
};
 
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
 
$('.typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'states',
  source: substringMatcher(states)
});
.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {
  width: 422px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.jquery.js"></script>


<div class="container" >
  <input class="typeahead form-control" type="text" placeholder="States of USA" />
</div>

javascript - Twitter's typeahead.js suggestions are not styled (have n...

javascript css typeahead.js
Rectangle 27 1

When I ran this example I then encountered your issue i.e. the dropdown is not displaying the search results even though the remote request is returning valid JSON data.

When I searched for "TEST", I can see in the browser console that results are returned (in this case two records) :

0: {codigoMedicamento:16858, descripcionMedicamento:TESTOVIRON DEPOT 250mg/mL Inyectable,}
1: {codigoMedicamento:17091, descripcionMedicamento:TESTONON Inyectable,}

However, the problem is that your server is returning data with the wrong response header for a JSONP request:

Content-Type:application/json
Content-Type:application/javascript

Additionally the full response header looks like this:

Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection:Keep-Alive
Content-Language:es-PE
Content-Type:application/json
Date:Thu, 23 Jan 2014 00:00:00 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive:timeout=5, max=100
Pragma:no-cache
Server:Apache
Transfer-Encoding:chunked

What also does not look right is the "Expires" value; according to this the response data expired in 1981!

Hence to fix this problem it looks like you need to modify the service call (i.e. http://geofarma.pe/service/GetMedicamentos) so that it returns the correct Content-Type in its response header. Setting the Expires value to something more current is a good idea too.

javascript - Typeahead.js not showing dropdown - Stack Overflow

javascript jquery ajax jsonp typeahead.js
Rectangle 27 1

The Bloodhound object by default caches prefetched data in the browser's local Storage, assigns it a TTL (time-to-live) of 1 day, and does not revalidate it until the TTL expires. The defaults can be changed setting "cache: false" and/or "ttl: 1000" (milliseconds) when the Bloodhound object is initialized.

Pre-fetching is related, but slightly different than caching, in that pre-fetched data is not subject to Cache-Control headers that the server sends. It also lives in LocalStorage, not in the browser's cache (which is why a hard reload, or a cache clear does not cause it to be re-fetched).

Remote fetched files on the other hand are revalidated subject to Cache-Control headers. So a browser may still cache them if the server allows it. However, they are stored in the cache, not in LocalStorage.

There is a per-domain space limitation in LocalStorage (see What is the max size of localStorage values?), so large pre-fetches will fail, though I don't know if typeahead fails gracefully (ie, uses the data, even though it cannot store it).

javascript - Typeahead.js remote works, but prefetch doesn't - Stack O...

javascript jquery typeahead.js twitter-typeahead
Rectangle 27 188

By default, the dropdown menu created by typeahead.js is going to look ugly and you'll want to style it to ensure it fits into the theme of your web page.

My solution was thus to copy the styling from the example I wished to replicate:

.tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999;
}

.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor { /* UPDATE: newer versions use .tt-suggestion.tt-cursor */
    color: #fff;
    background-color: #0097cf;

}

.tt-suggestion p {
    margin: 0;
}

For some reason my suggested edit got rejected, but note that the tt-is-under-cursor class seems to have been renamed to tt-cursor. Documentation here.

There is also a tt-input instead of the tt-query (as for 0.10.5)

Wouldn't it be better to have the old versions in the comments?

javascript - Twitter's typeahead.js suggestions are not styled (have n...

javascript css typeahead.js
Rectangle 27 103

So, the following styles will give you this look & feel. It's based on the CSS I extracted from the official Typeahead examples website.

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {    /* used to be tt-dropdown-menu in older versions */
  width: 422px;
  margin-top: 4px;
  padding: 4px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  line-height: 24px;
}

.tt-suggestion.tt-cursor,.tt-suggestion:hover {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}
form-control
<input class="typeahead form-control" type="text" placeholder="States of USA">

Best for me too, also because it's absolutely not invasive. Not sure why this is not marked as correct. :-)

.tt-dropdown-menu
.tt-menu

Finally got it working thanks to this answer, thanks! I submitted an update to fix the issue mentioned by @groundh0g

@tiho Thanks a lot. I've accepted it.

javascript - Twitter's typeahead.js suggestions are not styled (have n...

javascript css typeahead.js
Rectangle 27 1

This isn't really a typeahead.js issue. The issue is that you are making a cross-domain request from luyencong.net to ws.luyencong.net. If you can, host the prefetch JSON file on luyencong.net that's probably the easiest solution.

jQuery('.search-field.input').typeahead({
  // ...
  prefetch: 'http://luyencong.net/data/search/query.php?do=advanced'
  // ...
});

javascript - Typeahead.js trouble - Suggestions not appear - Stack Ove...

javascript typeahead.js
Rectangle 27 1

Don't put a href inside your items. But inside your typeahead use select function like below:

select: function( event, key ) {
            window.location.href ="Your-Key-related-url-here";
        }

Sorry I'm kinda new to javascript and don't know how I can add this line in my code. Can you be more specific in what code I need to edit in order for this to work Shailesh? Thanks!

javascript - typeahead.js search box navigation with enter key - Stack...

javascript jquery typeahead.js
Rectangle 27 1

Try deleting the entries from your browser's localStorage and starting again.

javascript - Typeahead.js remote works, but prefetch doesn't - Stack O...

javascript jquery typeahead.js twitter-typeahead
Rectangle 27 27

I was going to suggest the same thing

Works great with Bootstrap

This worked perfectly with no changes in Rails 4.2 and bootstrap-sass (3.3.7) autoprefixer-rails (>= 5.2.1) sass (>= 3.3.4) It's also a bit more responsive friendly that some of the other solutions. Plus it means your input box can be width 100% so should work with most layouts.

Although if you input is wider than 162 (the min width used here) then you might want to also add width: 100%; to the first section for the tt-menu/tt-dropdown

javascript - Twitter's typeahead.js suggestions are not styled (have n...

javascript css typeahead.js
Rectangle 27 12

This is the code that works for me:

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
    margin-bottom: 0;
}
.tt-hint {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #999;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.tt-dropdown-menu {
    min-width: 160px;
    margin-top: 2px;
    padding: 5px 0;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;

}
.tt-suggestion {
    display: block;
    padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
    color: #fff;
    background-color: #dfdfdf;
}
.tt-suggestion.tt-is-under-cursor a {
    color: #fff;
}
.tt-suggestion p {
    margin: 0;
}

This solution works no matter the width of the input. Thanks!

Work perfect for me with typeahead.js + BS3 + datatable on the same screen . Thanks

javascript - Twitter's typeahead.js suggestions are not styled (have n...

javascript css typeahead.js
Rectangle 27 3

Since i have a less environment with BS3 included i took Zugwalt css code (placed it in a more readable hierarchy) and filled it with styling from bs3's dropdown-menu. It's simply following your (customized) variables.

.twitter-typeahead {
      display: block;
      width: 100%; //BS 3 needs this to inherit this for children

      .tt-query,
      .tt-hint {
        margin-bottom: 0;
      }

      .tt-dropdown-menu {
        z-index: @zindex-dropdown;
        min-width: 326px;
        padding: 5px 0;
        margin: 2px 0 0; // override default ul
        font-size: @font-size-base;
        text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
        background-color: @dropdown-bg;
        border: 1px solid @dropdown-fallback-border; // IE8 fallback
        border: 1px solid @dropdown-border;
        border-radius: @border-radius-base;
        .box-shadow(0 6px 12px rgba(0, 0, 0, .175));
        background-clip: padding-box;

        .tt-suggestions {

          .tt-suggestion {
            padding: 3px 12px;
            font-weight: normal;
            line-height: @line-height-base;
            color: @dropdown-link-color;
            white-space: nowrap; // prevent links from randomly breaking onto new lines
          }

          .tt-suggestion.tt-cursor {
            color: @dropdown-link-hover-color;
            background-color: @dropdown-link-hover-bg;
          }

          .tt-suggestion p {
            margin: 0;
          }
        }
      }
    }

great work with bootstrap less variables

javascript - Twitter's typeahead.js suggestions are not styled (have n...

javascript css typeahead.js
Rectangle 27 1

Here's an scss version that relies on the bootstrap variables/declarations as much as possible. Unfortunately you cannot extend nested selectors in sass, otherwise it would be smaller:

@mixin typeahead-active() {
  // mimics  @extend .dropdown-menu > .active > a;
  color: $dropdown-link-active-color;
  text-decoration: none;
  outline: 0;
  background-color: $dropdown-link-active-bg;
}

//https://github.com/corejavascript/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names
span.twitter-typeahead {

  // this is the suggested matches dropdown
  .tt-menu {
    @extend .dropdown-menu;
  }

  .tt-hint {
    color: #999
  }

  // Added to suggestion elements.
  .tt-suggestion {

    // mimic .dropdown-menu > li > a
    padding: 3px 20px;
    line-height: $line-height-base;

    // Added to suggestion element when menu cursor moves to said suggestion.
    &.tt-cursor {
      @include typeahead-active;
    }

    // Hover/focus on suggestion
    &:hover,
    &:focus {
      @include typeahead-active;
    }

    p {
      margin: 0;
    }
  }

  .input-group & {
    display: block !important;
    .tt-dropdown-menu {
      top: 32px !important;
    }
  }
  .input-group.input-group-lg & {
    .tt-dropdown-menu {
      top: 44px !important;
    }
  }
  .input-group.input-group-sm & {
    .tt-dropdown-menu {
      top: 28px !important;
    }
  }
}

javascript - Twitter's typeahead.js suggestions are not styled (have n...

javascript css typeahead.js
Rectangle 27 1

People have made some fixes to it, but the fixes aren't completely universal, you'd have to tweak the properties yourself to actually get it to work properly. The fix that I'm starting off with is this: http://jsfiddle.net/ragulka/Dy9au/1/

.twitter-typeahead {
  width: 100%;
  position: relative;
}
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
  margin: 0;
  width: 100%;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.has-warning .twitter-typeahead .tt-query,
.has-warning .twitter-typeahead .tt-hint {
  border-color: #c09853;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .twitter-typeahead .tt-query,
.has-error .twitter-typeahead .tt-hint {
  border-color: #b94a48;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .twitter-typeahead .tt-query,
.has-success .twitter-typeahead .tt-hint {
  border-color: #468847;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.twitter-typeahead .tt-query:focus,
.twitter-typeahead .tt-hint:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.has-warning .twitter-typeahead .tt-query:focus,
.has-warning .twitter-typeahead .tt-hint:focus {
  border-color: #a47e3c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
}
.has-error .twitter-typeahead .tt-query:focus,
.has-error .twitter-typeahead .tt-hint:focus {
  border-color: #953b39;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}
.has-success .twitter-typeahead .tt-query:focus,
.has-success .twitter-typeahead .tt-hint:focus {
  border-color: #356635;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
}
.twitter-typeahead .tt-hint {
  color: #a1a1a1;
  z-index: 1;
  border: 1px solid transparent;
}
.twitter-typeahead .tt-query {
  z-index: 2;
}
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
}
.twitter-typeahead .input-sm.tt-query,
.twitter-typeahead .hint-sm.tt-hint {
    border-radius: 3px;
}
.twitter-typeahead .input-lg.tt-query,
.twitter-typeahead .hint-lg.tt-hint {
    border-radius: 6px;
}
.input-group .twitter-typeahead:first-child .tt-query,
.input-group .twitter-typeahead:first-child .tt-hint {
  border-radius: 4px 0 0 4px !important;
}
.input-group .twitter-typeahead:last-child .tt-query,
.input-group .twitter-typeahead:last-child .tt-hint {
  border-radius: 0 4px 4px 0 !important;
}
.input-group.input-group-sm .twitter-typeahead:first-child .tt-query,
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint {
  border-radius: 3px 0 0 3px !important;
}
.input-group.input-group-sm .twitter-typeahead:last-child .tt-query,
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint {
  border-radius: 0 3px 3px 0 !important;
}
.input-sm.tt-query,
.hint-sm.tt-hint,
.input-group.input-group-sm .tt-query,
.input-group.input-group-sm .tt-hint {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}
.input-group.input-group-lg .twitter-typeahead:first-child .tt-query,
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint {
  border-radius: 6px 0 0 6px !important;
}
.input-group.input-group-lg .twitter-typeahead:last-child .tt-query,
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint {
  border-radius: 0 6px 6px 0 !important;
}
.input-lg.tt-query,
.hint-lg.tt-hint,
.input-group.input-group-lg .tt-query,
.input-group.input-group-lg .tt-hint {
  height: 45px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
}
.tt-dropdown-menu {
  width: 100%;
  min-width: 160px;
  margin-top: 2px;
  padding: 5px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
.tt-suggestion {
  display: block;
  padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.tt-suggestion.tt-is-under-cursor a {
  color: #fff;
}
.tt-suggestion p {
  margin: 0;
}

html - Javascript with Twitter's typeahead.js ruining my form's layout...

javascript html css forms typeahead.js
Rectangle 27 0

The only outstanding problem is when I apply shadow effect to both the .btn and .form-control the shadow is drawn also between the input field and the button.

@schnauss Neither does mine, the solution is not dependent on less.

javascript - Typeahead.js interferes with Bootstrap input groups - Sta...

javascript html css twitter-bootstrap typeahead.js
Rectangle 27 0

This fixes the problem when the left-hand side of the text box is square (not rounded):

javascript - Typeahead.js interferes with Bootstrap input groups - Sta...

javascript html css twitter-bootstrap typeahead.js
Rectangle 27 0

You can't access element from data source function. this points to Dataset object, and there is no reference to input element. However you can initialize typeahead in each loop, so you can access current input element:

$('.typeahead').each(function() {
    $(this).typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    }, {
        name: 'items',
        displayKey: 'value',
        source: populateItems(this.id)
    })
});


function populateItems (id) {
    return function findMatches(inp, cb) {
        console.log("id: " + id);
        // ...
    };
};

That worked. Thanks. OK so there is one new problem, what should be the syntax if i add some of the input element dynamically.

javascript - How to use this variable to get the id of input in typeah...

javascript jquery typeahead.js
Rectangle 27 0

Typeahead.js version 0.10.0 now uses a separate component called a suggestion engine for providing the suggestion data. The suggestion engine which ships with Typeahead.js is called Bloodhound.

An example of this working with a remote data source (I'm querying the TheMovieDb API, try searching for "Aliens" for example) can be found here:

// Instantiate the Bloodhound suggestion engine
var movies = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=470fd2ec8853e25d2f8d86f685d2270e',
        filter: function (movies) {
            // Map the remote source JSON array to a JavaScript object array
            return $.map(movies.results, function (movie) {
                return {
                    value: movie.original_title
                };
            });
        }
    }
});

// Initialize the Bloodhound suggestion engine
movies.initialize();

// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
    displayKey: 'value',
    source: movies.ttAdapter()
});

This is sad because the functionality bloodhound is offering is far more than what I need. It used to be pretty simple until 0.9.3

The simplest remote example is called "Prefetch Backed by Remote" in "twitter.github.io/typeahead.js/examples/. Whilst it is a little more involved, I don't think its too much of an overhead to use. Also many of the remote parameters are the same as before.

The official documentation mentions that we can use custom functions as source . I guess that would be simpler, provided that we're able to figure out how.

I agree with zuhaib, I think Bloodhound jst made typeahead harder and a tad bloated.

The functionality of bloodhound was there in previous versions of typeahead.js, it was just coupled with the jQuery plugin. In v0.10, I've decoupled the two to allow devs who don't need an advanced suggestion engine to define their own data source. As a result, the API isn't as simple I'm hoping to address this in upcoming releases.

javascript - How do we set remote in Typeahead.js 0.10? - Stack Overfl...

javascript autocomplete remote-server typeahead typeahead.js
Rectangle 27 0

From the docs: "While it's possible to get away with it for smaller data sets, prefetched data isn't meant to contain entire data sets. Rather, it should act as a first-level cache for suggestions. If don't keep this warning in mind, you run the risk of hitting local storage limits."

I don't know how much data you are retrieving but it might be better to make an ajax call to get the data and then load that into your Bloodhound instance when you get the response.

Here is an example using a jQuery ajax call:

//Let's assume that the data you get back from the server is an array of objects
//data = [{value: 'a'}, {value: 'b'}, {value: 'c'}];

$.get( "http://example.com/your-data", function(data) {
  var bh = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: data
  });

  var dataset = {
    name: "My-dataset-name",
    displayKey: "value",
    source: bh.ttAdapter()
  };

  var ta = $(".typeahead").eq(0).typeahead(
    {
      hint: true
      highlight: true
      minLength: 1
    },
    datasetStates
    );
  ta.on('typeahead:selected', someFunctionToHandleEvent);
});

javascript - Typeahead.js - prefetch dynamic php generated JSON - Stac...

javascript json typeahead.js prefetch bloodhound
Rectangle 27 0

The code you wrote was "blocked" as querying themoviedb API meant that your code would be making a cross domain request. These are blocked by default but you can get around this problem by making a JSONP request.

I've created a working example of Typeahead.js which uses TheMovieDb API here:

The code to implement the typeahead control is:

$('#movies').typeahead({
    displayKey: 'value',
    header: '<b>Movie suggestions...</b>',
    limit: 10,
    minLength: 3,
    remote: {
        url : 'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=470fd2ec8853e25d2f8d86f685d2270e',
        filter: function (parsedResponse) {               
            retval = [];
            for (var i = 0;  i < parsedResponse.results.length;  i++) {
                retval.push({
                    value: parsedResponse.results[i].original_title,
                    tokens: [parsedResponse.results[i].original_title]
                });
            }
            return retval;
        },
        dataType: 'jsonp'
    }
});

Note that this answer is for Typeahead version 0.9.3. A more up to date version for typeahead version 0.10.0, which makes use of a suggestion engine called Bloodhound, can be found here.

Thanks a lot :) !!

javascript - typeahead.js and API themoviedb - Stack Overflow

javascript api bootstrap typeahead typeahead.js