2012-03-20 71 views
1

我有一個腳本,它在輸入字段中輸入內容後顯示搜索結果。我想通過使文本加粗來模仿Google,這與輸入的值相似。用Jquery模仿Google粗體字體

我嘗試這樣做:

$(input).live('keyup', function(){ 
    var makeBold = $('#Results').css("font-weight","bold"); 

    if ($(input).val() == $('#Results').html()) { 
     makeBold(); 
    } 
}); 

的問題是,現在一切都大膽,而不是僅僅的匹配值。我如何參考價值並將其與結果聯繫起來?

+2

makeBold不是一個函數... – max 2012-03-20 19:14:50

+0

沒有相關的HTML,沒有人可以肯定知道。 – 2012-03-20 19:14:51

+1

請注意,您不應該學習如何獨立完成此操作,但有[現有腳本](http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html )將爲您處理這個問題。 – 2012-03-20 19:20:38

回答

0

得到它的工作使用@邁克爾Mior提供

var makeBold = $(input).val(); 
$('#Results').highlight(makeBold); 

.highlight的一部分指的是你可以大膽或任何改變的CSS的鏈接。

2

你會想要將匹配的結果部分包裝在<span style='font-weight:bold;'>標記中。你可以使用javascript replace()函數來做到這一點很容易。

2

你的問題是當你定義makeBold時,你正在執行「made bold」。 css()的結果分配給makeBold,這不是一個函數。

var makeBold = $('#Results').css("font-weight","bold"); 

如果你想成爲一個功能,分配makeBold一個匿名的。

var makeBold = function() { $('#Results').css("font-weight","bold"); } 
+0

這是問題的一部分,雖然還有其他問題。 – 2012-03-20 19:19:36

1

這裏有一些你沒有在這裏顯示的代碼。我不確定自動完成的結果會發生什麼情況。從這裏顯示的內容來看,我所知道的是,你有一個輸入框和一個結果容器,我只能假設它在結果上被填充(這在你的函數中沒有顯示)。

不管Javascript是在整個#Results容器上設置CSS屬性。如果在那裏有其他的結果,他們也會有很強的font-weight。也許在自動完成的結果周圍添加span標籤,並使用#Results span作爲選擇器。

編輯:假設你有一個自動完成功能已經打印出的建議,我會爲了做大膽的自動完成結果的類型化部分是通過在KEYUP其子比較 - 再包裝他們在一個強大的標籤。

+0

結果有類。我可以讓他們做任何事情。問題是我不知道如何將結果的輸入值與其他任何東西(幾個類)聯繫起來 – Youss 2012-03-20 19:23:15