javascript - How to avoid to display JSON string with custom typeahead -

i have overridden typeahead methods enable ajax calls (getting json object results since need field name display, , field url hide).

but it's not enough, works when user tape research, if pick result, or press tab, there json string appears in input, like:

{     "name":"test",     "url":"http://mysite.com/test" } 

i want display field name in input, in dropbox overriding highlighter method, don't know if it's possible.

highlighter: function (obj)  {     var item = json.parse(obj);     var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')     return item.name.replace(new regexp('(' + query + ')', 'ig'), function ($1, match)      {         return '<strong>' + match + '</strong>'     }); } 

is there way simple thing?

i couldn't understand provide methods can override if can't...

typeahead 2.x not allow storage or loading of json data default. looks you're trying work around in highlighter method json.parse, override few methods similar different question.

you can override method within typeahead, have cheat render , select, need change using attr('data-value' ...) data('value' ...) did in other answer.

beyond that, must change every single method actively touches json object: highlighter, matcher, sorter, , updater.

because want show name in highlight, can avoid having change highlighter modifying render little previous question:

typeahead.render = function(items) {     var =      items = $(items).map(function (i, item) {         = $(that.options.item).data('value', item)  // <- modified data         i.find('a').html(that.highlighter(item.name)) // <- modified .name         return i[0]     });      items.first().addclass('active')     this.$menu.html(items)     return }; 

ignoring select, show in other answer, still need override matcher, sorter, , updater, which, including highlighter, can done through passed in options:

var typeahead = $("#mytypeahead").typeahead({     matcher: function (item) {         return ~item.name.tolowercase().indexof(this.query.tolowercase())     },     sorter: function (items) {         var beginswith = []             , casesensitive = []             , caseinsensitive = []             , item          while (item = items.shift()) {             if (!item.name.tolowercase().indexof(this.query.tolowercase())) beginswith.push(item)             else if (~item.name.indexof(this.query)) casesensitive.push(item)             // note: assume, default, results contain text             else caseinsensitive.push(item)         }          return beginswith.concat(casesensitive, caseinsensitive)     },     updater: function(item) {         // note: called when user picks option, can         //  use item.url here         return item.name     } }); 

sorter called after overridden source method calls process, kicks off else.