如何避免顯示帶自定義鍵入的JSON字符串

Question

我已經重寫了啓用AJAX調用的typeahead方法（獲取JSON對象結果，因爲我需要顯示一個字段name，並且字段url要隱藏）。

但是這還不夠，一切正常，當用戶帶了一些研究，但如果你選擇了一個結果，或者直接按TAB，有其出現在輸入的JSON字符串，是這樣的：

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

我只是想在輸入中顯示字段name，就像我在dropbox中重寫highlighter方法一樣，但我不知道是否可能。

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

有沒有辦法做到這一點？

我無法理解他們提供的，如果我們不能，我們可以覆蓋方法...

Answer 1

2.x的事先鍵入的內容不允許JSON數據的默認存儲或加載。看起來你正在嘗試在highlighter方法中用JSON.parse解決這個問題，但是你可以重寫一些類似於different question的方法。

您可以在已覆蓋事先鍵入的內容幾乎所有的方法，但你要騙它做的render和select，您需要使用attr('data-value' ...)到data('value' ...)像我一樣在對方的回答改變。

除此之外，你必須更改積極觸動你的JSON對象的每一個方法：highlighter，matcher，sorter和updater。

因爲你只需要在高亮顯示的名字，你可以避免從前面的問題修改render一點點改變highlighter：

typeahead.render = function(items) { 
    var that = this 

    items = $(items).map(function (i, item) { 
     i = $(that.options.item).data('value', item) // <- modified for data 
     i.find('a').html(that.highlighter(item.name)) // <- modified for .name 
     return i[0] 
    }); 

    items.first().addClass('active') 
    this.$menu.html(items) 
    return this 
}; 

忽略select，我顯示出對方的回答，你仍然需要重寫matcher，sorter和updater，其中，包括highlighter，都可以通過選項傳遞來完成：

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: they assume, by default, that all results contain the text 
      else caseInsensitive.push(item) 
     } 

     return beginswith.concat(caseSensitive, caseInsensitive) 
    }, 
    updater: function(item) { 
     // NOTE: this is called when the user picks the option, so you can also 
     // use item.url here 
     return item.name 
    } 
}); 

sorter在您覆蓋的source方法調用process之後調用，它會啓動所有其他操作。