bootstrap typeahead url/redirect -
$(function(){ var orthoobjs = {}; var orthonames = []; var throttledrequest = _.debounce(function(query, process){ $.ajax({ url: 'json/ortho4.json' ,cache: false ,success: function(data){ orthoobjs = {}; orthonames = []; _.each( data, function(item, ix, list){ orthonames.push( item.searchphr ); orthoobjs[ item.searchphr ] = item; }); process( orthonames ); } }); }, 300); $(".typeahead").typeahead({ source: function ( query, process ) { throttledrequest( query, process ); } ,updater: function (item) { var url = "orthoobjs[item.searchurl]"; window.location = url;
whats best way redirect work? have seen similar questions, can't work. documentation on typeahead isn't great. using underscore.js each function. want simple search query redirects when user selects.
i got work. got little help... here is. there json file..
[ { "id":1, "searchurl":"invisalign.html", "name":"invisalign" } ,{ "id":2, "searchurl":"invisalign.html", "name":"invisalign teen" } ,{ "id":3, "searchurl":"clearbraces.html", "name":"clear braces" } ]
and html code....
lots of stuff here.. http://fusiongrokker.com/post/heavily-customizing-a-bootstrap-typeahead
and search code..
<form method="post" id="myform" class="navbar-search pull-left"> <input type="text" class="search-query typeahead" placeholder="search our website" autocomplete="off" data-provide="typeahead" /> <i class="fa-icon-search icon-black"></i> </form> </li> $(function(){ var bondobjs = {}; var bondnames = []; $(".typeahead").typeahead({ source: function ( query, process ) { //get data populate typeahead (plus id value) $.ajax({ url: '/json/bonds.json' ,cache: false ,success: function(data){ bondobjs = {}; bondnames = []; _.each( data, function(item, ix, list){ bondnames.push( item.name ); bondobjs[ item.name ] = item.searchurl; }); process( bondnames ); } }); } , updater: function ( selectedname ) { window.location.href =bondobjs[ selectedname ]; } }); }); </script>
Comments
Post a Comment