Twitter's Typeahead.Js Suggestions Are Not Styled (Have No Border, Transparent Background, etc.)

Twitter's typeahead.js suggestions are not styled (have no border, transparent background, etc.)

So looking into the docs I now see:

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;
}

Bootstrap tokenfield and Twitter typeahead dropdown not styled

For example, if I type "re", the suggestion for "red" appears but it shows unstyled as follows:

{"_query":"re","value":"red"...

In order to avoid that you need to add the displayKey option to your tokenfield:

$('#tokenfield-typeahead').tokenfield({
    typeahead: [null, {
        source: engine.ttAdapter(),
        displayKey: 'value'
    }]
});

$(document).ready(function() {
    var engine = new Bloodhound({
        local: [{
            value: 'red'
        }, {
            value: 'blue'
        }, {
            value: 'green'
        }, {
            value: 'yellow'
        }, {
            value: 'violet'
        }, {
            value: 'brown'
        }, {
            value: 'purple'
        }, {
            value: 'black'
        }, {
            value: 'white'
        }],
        datumTokenizer: function(d) {
            return Bloodhound.tokenizers.whitespace(d.value);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace
    });

    engine.initialize();

    $('#tokenfield-typeahead').tokenfield({
        typeahead: [null, {
            source: engine.ttAdapter(),
            displayKey: 'value'
        }]
    });
});

.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 { 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    display: none;
}

.tt-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 { 
    color: #fff;
    background-color: #0097cf;

}

.tt-suggestion p {
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>

<div class="row">
    <div class="col-lg-12">
        <dl class="dl-horizontal">
            <dt>Action Items:</dt>
            <dd>
                <div id="action-items">
                    <input type="checkbox" name="item1" value="item1"> Action Item 1<br>
                    <form class="form-inline">
                        <div class="tokenfield form-group">
                            <input type="text" class="typeahead form-control" id="tokenfield-typeahead" />
                        </div>
                        <button type="button" class="btn btn-default">Save</button>
                    </form>
                    <input type="checkbox" name="item2" value="item2"> Action Item 2<br>
                    <input type="checkbox" name="item3" value="item3"> Action Item 3
                </div>
            </dd>
            <hr />
        </dl>
    </div>
</div>

Typeahead.js not showing suggestions

const states = [
  "Alabama",
  "Alaska",
  "Arizona",
  "California",
  "Colorado",
  "Connecticut",
  "Delaware",
  "Florida"
];

$("#the-basics .typeahead").typeahead({
  hint: true,
  highlight: true,
  minLength: 1,
  name: "states",
  source: states
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<div class="container">
  <div id="the-basics">
    <input class="typeahead" type="text" placeholder="States of USA" autocomplete="off">
  </div>
</div>

twitter's typeahead.js doesn't pop dropdown window

Hey I was able to copy the example as a jsfiddle:

http://jsfiddle.net/ff9E5/2/

Here is full code on jsfiddle:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <link rel="stylesheet" type="text/css" href="http://twitter.github.io/typeahead.js/css/examples.css">

  <script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
  <script type='text/javascript' src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
  var numbers;

  numbers = new Bloodhound({
    datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: [
      { num: 'one' },
      { num: 'two' },
      { num: 'three' },
      { num: 'four' },
      { num: 'five' },
      { num: 'six' },
      { num: 'seven' },
      { num: 'eight' },
      { num: 'nine' },
      { num: 'ten' }
    ]
  });

  numbers.initialize();

  $('.typeahead').typeahead(null, {
    displayKey: 'num',
    source: numbers.ttAdapter()
  });

});//]]>  

</script>

</head>
<body>
  <input class="typeahead" type="text" placeholder="numbers (1-10)" autocomplete="off">

</body>
</html>

FYI you don't need to include all those 4 scripts. You need to include

• jQuery e.g. jquery-1.10.2.min.js (https://code.jquery.com/jquery-1.11.0.min.js)
• typeahead bundle (it includes everything else). e.g. typeahead.bundle.js

And make sure you include the things in this order on your page: css includes, then your javascript includes, followed by your inline javascript.

Hope that helps.

typeahead suggestions list not decreasing

I've found

$(document).ready(function($) {
var cities_suggestions = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'villes2.json',
    remote: {
        url: 'villes2/queries/%QUERY.json',
        wildcard: '%QUERY'
  },
});
cities_suggestions.initialize();
// init Typeahead
$('#my_search').typeahead(
{
    hint: true,
    minLength: 1,
    highlight: true
},
{
    name: 'cities',
    display: 'text',
    source: cities_suggestions,   // suggestion engine is passed as the source
    limit: 10,
});
// then fill hidden input for get the value :-)
$('#my_search').bind('typeahead:select', function(ev, suggestion) {
    $('#my_search_value').val(suggestion.value)
});

});

Typeahead.js Styling issue

I figured out the solution. Posting in the hopes of someone else encountering this issue.

The default html genereated by this component has style set to 'inline-block'. This was pushing it down to another row. having a style element for typeahead with display set to inline fixed this.

.tt-suggestion {
    display: inline;
}

Twitter's Typeahead is not working

Well, after some research, I found jQuery Autocomplete which worked since the first time, so here's the code I finally used:

/// <summary>
/// Obtiene el JSON de resultados de búsqueda.
/// </summary>
/// <param name="query">Búsqueda.</param>
/// <returns></returns>
[HttpGet, Authorize]
public ContentResult getAll(string query)
{
    DataTable dt;
    List<Models.Global.ISearchResult> _l = new List<Models.Global.ISearchResult>();
    dt = ...
    foreach (DataRow dr in dt.Rows)
    {
        _l.Add(new Models.Global.ResultadosContratistasModel()
        {
            value = dr["NAME"].ToString(),
            Url = "/Account/{0}".Write(dr["ACCOUNTNUM"])
        });
    }
    ...
    return Content(JsonConvert.SerializeObject(new { suggestions = _l }), "application/json");
}

using this data model:

public interface ISearchResult
{
    string value { get; set; }
    string Categoría { get; }
    string Url { get; set; }
    ISearchResultData data { get; }
}
public interface ISearchResultData
{
    string category { get; set; }
    string goTo { get; set; }
}

/// <summary>
/// objeto "data" del resultado de búsqueda rápida.
/// </summary>
[DataContract]
public struct SearchResultData : ISearchResultData
{
    /// <summary>
    /// Categoría de la respuesta.
    /// </summary>
    [DataMember]
    public string category { get; set; }
    /// <summary>
    /// Url a la que dirigirá el resultado.
    /// </summary>
    [DataMember]
    public string goTo { get; set; }
}

/// <summary>
/// Clase serializable de Resultados de búsqueda rápida de obra.
/// </summary>
[DataContract]
public class ResultadosObraModel : ISearchResult
{
    /// <summary>
    /// Texto a mostrar como resultado de la búsqueda.
    /// </summary>
    [DataMember]
    public string value { get; set; }
    /// <summary>
    /// Categoría del resultado de búsqueda.
    /// </summary>
    [IgnoreDataMember]
    public string Categoría
    {
        get
        {
            return "Obras";
        }
    }
    /// <summary>
    /// URL a la que deberá dirigirse si se selecciona la opción.
    /// </summary>
    [IgnoreDataMember]
    public string Url { get; set; }
    /// <summary>
    /// Objeto "data" con la información requerida por el plugin.
    /// </summary>
    [DataMember]
    public ISearchResultData data
    {
        get{
            return new SearchResultData()
            {
                category = Categoría,
                goTo = Url
            };
        }
    }
}

and on the JS side:

$('input#goBox').autocomplete({
    serviceUrl: '/consultas/getAll',
    minChars: 2,
    lookupLimit: 10,
    groupBy: 'category',
    noSuggestionNotice: 'Presiona "Enter" para ver más resultados.',
    onSelect: function (suggestion) {
        location.href = suggestion.data.goTo;
    }
});

I hope somebody will find this helpful!

---

Related Topics