2014-10-16 45 views
0

jQuery對我來說很難理解。每次我必須使用它時,我最終都會在幾個小時內閱讀文檔以達到目的。我正在使用此代碼(實時編輯可用)。更改jQuery中的if語句

http://codepen.io/anon/pen/vKFBy

它過濾實時記錄,而在輸入文本tyiping。問題是我不想要它的搜索方法。讓我解釋。

<ul id="list"> 
    <li class="in"><span>google.com</span></li> 
    <li class="in"><span>gmail.com</span></li> 
    <li class="in"><span>samsung.com</span></li> 
    <li class="in"><span>amazon.de</span></li> 
    <li class="in"><span>apple.de</span></li> 
</ul> 

當我鍵入「G」或「G」(這是不區分大小寫)amazon.de和apple.de消失,因爲它們不包含任何「G」同時google.com gmail.com和三星。 com仍然可見。這就是問題。我不想保留三星g .com只是因爲它在某個時候它有一個「g」。我想只返回範圍爲開始與某個字符串的元素。實際上,這是我試圖重現的。

我鍵入 「G」:

<ul id="list"> 
    <li class="in"><span>google.com</span></li> 
    <li class="in"><span>gmail.com</span></li> 
    <li class="hiding out hidden"><span>samsung.com</span></li> 
    <li class="hiding out hidden"><span>amazon.de</span></li> 
    <li class="hiding out hidden"><span>apple.de</span></li> 
</ul> 

我繼續鍵入 「轉到」:

<ul id="list"> 
    <li class="in"><span>google.com</span></li> 
    <li class="hiding out hidden"><span>gmail.com</span></li> 
    <li class="hiding out hidden"><span>samsung.com</span></li> 
    <li class="hiding out hidden"><span>amazon.de</span></li> 
    <li class="hiding out hidden"><span>apple.de</span></li> 
</ul> 

我知道,我應該使用的語法:

indexOf(searchTerm) 

或者:

[span^="'+searchTerm+'"] 

或者:

str.match(/^searchTerm/) 

但我不能管理編輯if語句的電流。每次我打破腳本。

+0

Side-note:你已經在'keyup'處理程序中嵌套了':containsi' jQuery擴展!最好你重新格式化你的代碼,並看看在一些緊迫性嵌套:) – 2014-10-16 15:56:11

+0

嗨,謝謝你的答覆。你爲什麼這麼說?你的意思是這可能是一個表演的問題? – user1274113 2014-10-16 17:03:12

+0

當只需要初始化一次時,您不應該不必要地反覆運行代碼。我擔心你可能有其他類似的問題。最好避免這種情況。 – 2014-10-16 17:04:35

回答

1

創建一個新的:startswith自定義選擇器(或:startswithi如果您需要特定)並檢查indexOf匹配上的位置0:

http://jsfiddle.net/TrueBlueAussie/z148kzeo/

//extends :contains to be case insensitive 
    $.extend($.expr[':'], { 
     'startswith': function (elem, i, match, array) { 
      return (elem.textContent || elem.innerText || '').toLowerCase() 
       .indexOf((match[3] || "").toLowerCase()) == 0; 
     } 
    }); 

請注意,您在keyup處理事件中添加您的自定義選擇器(每個KEYUP)。我把它移到了開始。

+0

我明白了。你是完全正確的。 Keyup事件毫無意義。謝謝。 – user1274113 2014-10-16 17:26:51

1

indexOf功能檢查發現的指標比大於或等於0,將其設置爲等於0,檢查字符串的開頭:

{ 
return (elem.textContent || elem.innerText || '').toLowerCase() 
    .indexOf((match[3] || "").toLowerCase()) == 0; 
} 

演示:http://codepen.io/anon/pen/japcB

+0

我不敢相信我是如何錯過那部分......謝謝你一噸 – user1274113 2014-10-16 17:02:14

0

我已經在這裏看到幾個答案。讓我再拋出另一個選項。從您的搜索文本中獲取值並創建正則表達式模式,並在列表元素中查找該模式。我不是專家,但是馬上就是我想到的。希望這可以幫助別人:)