twitter / typeahead.js

typeahead.js is a fast and fully-featured autocomplete library
http://twitter.github.io/typeahead.js/
MIT License
16.52k stars 3.21k forks source link

ASP.Net MVC5 app: Twitter.Typeahead not working. #1760

Closed George-01 closed 5 years ago

George-01 commented 5 years ago

-> I installed Twitter.Typeahead via PM console -> Added it to my bundles.config file -> created a file for the required css as typeahead.css file:

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

->Below is my .cshtml form:

@{ ViewBag.Title = "New Form"; }

New Form

->Below is my script section:

@section scripts {

}

->When i run the application and type in first 3 characters of the search word as specified in the minLength, nothing displays:

New_For_Books

Has anyone been able to resolve this? i have checked several solutions on google none fixed the issue. I would appreciate if someone could assist to resolve this.

George-01 commented 5 years ago

Thankfully I was able to resolve it. Did a little fix to the customer API and now it works