jQuery的自動完成插件 - 定製的亮點功能

我的自動完成結果爲每個項目看起來是這樣的：jQuery的自動完成插件 - 定製的亮點功能

<h3>Celebrity Sweepstakes</h3><p>0 episodes</p>

但我想只有標題裏面的H3加以強調。請參閱下面的'高亮'功能。我不確定如何將原始RegExp更改爲僅在標題內部進行替換。

$(".show_autocomplete").autocomplete("/shows.js", { 
     minChars: 2, 
     max: 100, 
    formatItem:function(item, index, total, query){ 
    return "<h3>" + item.title + "</h3><p>" + item.episodes + " episodes</p>" 
    }, 
    formatMatch:function(item){ 
    return item.title; 
    }, 
    formatResult:function(item){ 
    return item.title; 
    }, 
    dataType:'json', 
    parse:function(data) { 
    return $.map(data, function(item) { 
     return { 
     data: item, 
     value: item.title, 
     result: item.title 
     } 
    }); 
    }, 
    highlight: function(value, term) { 
    var title = value.split("</h3>")[0].replace("<h3>", ""); //only replace inside this? 
    return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"); //original regexp 
    } 
});

來源

2010-08-01 Frexuz

-1

爲什麼比它更難？ :)這是我從你的主意中得到的，並且效果很好：

formatItem:function(item, index, total, query){ 
    return "<h3><a href=\"/show/" + item.permalink + "\">" + item.title + "</a></h3><p>" + item.followers + " followers | " + item.episodes + " episodes</p>" 
    }, 

    highlight: function(value, term) { 
    var value = $(value); 
    value.find("a").html(value.find("a").html().replace(RegExp(term, "gi"), "<strong>" + term + "</strong>")); 
    return value; 
    }

來源

2010-08-07 14:26:20 Frexuz

這可能是最好的解決方法是進一步分解它。除了它不僅僅適用於<h3>這一事實，目前的實現是否按照需要工作？

如果是這樣，那麼不是讓正則表達式更復雜，而是可以將功能分開一點。添加代碼以標識並提取標題/ <h3> -content，然後使用當前代碼對該標題執行高亮顯示。然後拿出結果並將它們與原始輸入的其餘部分結合起來，然後瞧，<h3> - 只突出顯示。

第二個好處是，如果需要其他調整，這種方法可能會使您的意圖比複雜的正則表達式更加清晰，有助於日後維護。

來源

2010-08-01 12:32:00

jQuery的自動完成插件 - 定製的亮點功能

回答

相關問題