Search Html5 Datalist By Value And Inner Text (or Some Other Property)

I am attempting to find a way so that when a user enters text into the data list, they can come across the same entry by course number (E.G. 'CS 101') or course name (E.G. 'Intro t

Solution 1:

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

Here's a fiddle. I put the option values/text into key:value pairs in a javascript object. NOTE: the key is an index number and the value is the option value attribute AND the text. This makes it easier to search them for our text.

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

Then I split them into rows that included both value and text.

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

I then setup a search function that would search those rows to see if any returned a match, and if they did the result was outputted to a div below the search box.

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

There's an example for all of the above in the fiddle.

EDIT: The below is the commented code for the loop to check if search text is in the datalist per op request.

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 falsefalse;
    }