按值和內部文本（或其他屬性）搜索HTML5 Datalist

Question

我試圖找到一種方式，以便當用戶輸入文本到數據列表中時，他們可以通過課程編號碰到相同的條目（EG「CS 101" ）或課程名稱（例如「介紹計算機科學）

目前，我有什麼是隻值字段搜索：

<datalist id="tagList"> 
     <option value=""></option> 
     <option value="CSCI 4950">Senior Software Project</option> 
     <option value="CSCI 5117">Developing the Interactive Web</option> 
     <option value="CSCI 5421">Advanced Algorithms</option> 
     <option value="CSCI 5980">Design Methods for Comp. Sci.</option> 
    </datalist> 

1. 解決方案需要在Android Webkit的工作網頁瀏覽器（Phonegap） - Chrome似乎處理Datalists與Android的原生瀏覽器相同，所以如果它在Chrome I中有效沒問題。
2. 它需要同時顯示課程名稱和課程編號用戶
3. 這需要得到普及和我使用AngularJS實際填充課程的完整列表不是硬編碼。

---

我已經試過

https://stackoverflow.com/a/22827978/2831961 - 出於某種原因，這並不工作。

我也試過類似的策略，但是具有數據值屬性。那也行不通。除非我負責一些我不瞭解的幕後Javascript工作。

Answer 1

http://jsfiddle.net/rh48cgrj/3/

這裏有一個小提琴。我將選項值/文本放入javascript對象中的key：value對中。注意：密鑰是一個索引號和值是選項值屬性和文本。這樣可以更輕鬆地搜索他們的文字。

var i = 0; 
var selectItems = {} 
$('#tagList option').each(function() { 
var listvalue = $(this).val(); 
var listtext = $(this).text(); 
selectItems[i] = listvalue + " " + listtext + ","; 
i++; 
}); 

然後我將它們分成包含值和文本的行。

count = i; 
for(i=0; i < count;i++) { 
var blockoftext = blockoftext + " " + selectItems[i].toLowerCase() + ","; 
} 

我再設置一個搜索功能，將搜索那些行，看看是否有返回的比賽，如果他們做的結果輸出到搜索框下方的一個div。

var texttosplit = blockoftext.split(","); 

var searchresults; 

    for(i=0; i < texttosplit.length; i++) { 
    (texttosplit[i].indexOf(searchvalue.toLowerCase()) != -1) ? 
    (searchresults = texttosplit[i] + "<br>") : false; 
    $("#searched").html(searchresults); 
} 

在小提琴中有上述所有的例子。

編輯：下面是循環的註釋代碼，以檢查搜索文本是否在每個操作請求的數據列表中。

for (i = 0; i < texttosplit.length; i++) { 
//The above loops through our array of class values and titles 

    (texttosplit[i].indexOf(searchvalue.toLowerCase()) != -1) ? 
// The above determines if our search text is in class title using a ternary operator 
// our array of class values and titles is lowercase so we make 
//sure our search text is lowercase as well 
// if we find a match between the search text and the class title/values perform the following: 

    (searchresults = texttosplit[i].replace(/\b[a-z]/g, function(letter) { 
    return letter.toUpperCase(); 
    }) 
// The above replaces the first char of every word with an uppercase char 
    .replace("Csci", "CSCI") + "<br>", 
// The above finds Csci and changes it to CSCI since all THOSE letters should be uppercase 

    prevtext = $("#searched").html(), 
//get current text of element with id "searched" and place it in prevtext 
    $("#searched").html(prevtext + searchresults)) 
//append "searched" by adding it's current text with the new searchresults 

    : 
//if search text is not in the class title return false 
    false; 
    }