I have the html code and javascript to read a local file in table format (4 columns) from a post here:
My code:
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.target.files || evt.dataTransfer.files; // FileList object.
var file = files[0];
// this creates the FileReader and reads stuff as text
var fr = new FileReader();
fr.onload = parse;
fr.readAsText(file);
// this is the function that actually parses the file
// and populates the table
function parse() {
var table = document.getElementById('emps');
var employees = fr.result.split('\n');
var c = 0;
for (var i in employees) {
var employee = employees[i].split(',');
if (employee.length == 4) {
var row = document.createElement('tr');
row.innerHTML = "<td>" + employee.join("</td><td>") + "</td>";
table.appendChild(row);
c++;
}
}
document.getElementById('result').innerHTML = '<span>Added ' + c + ' results from file: ' + file.name + '</span>';
}
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
document.getElementById('files').addEventListener('change', handleFileSelect, false);<div id="container">
<div id="drop_zone"><span id="drop_text">Drop file here</span></div>
<div id="selector">Or select file: <input id="files" multiple="multiple" name="files[]" type="file" /></div>
<p>Search keyword</p>
<p><input id="searchbar" spellcheck="true" type="text" /></p>
<h3>Results</h3>
</div>
<p><br /><br /><br /><br /></p>
<table id="emps"></table>
<div id="result"></div>which I would like to work with the search javascript given by Roko C. Buljan in How to Search a word from a sentence in javascript
I'm not sure what to change in this javascript so that it works with the searchbar I have above plus giving the entire row with the keyword. The javascript given by Roko is:
var string = document.getElementById("str").innerHTML;
var elDemo = document.getElementById("demo");
function getPortions(queryString, string) {
var results = [];
if (queryString.length > 0) {
var rgxp = new RegExp("(\\S*)?(" + queryString + ")(\\S*)?", "ig");
string.replace(rgxp, function (match, $1, $2, $3) {
results.push(($1 || "") + "<b>" + $2 + "</b>" + ($3 || ""));
});
}
return results;
}
document.getElementById("txt1").addEventListener("input", function () {
var result = getPortions(this.value, string);
elDemo.innerHTML =
"Found " + result.length + " results<br>" + result.join("<br>");
});
What else do I need to change or add? Can someone guide me how to fix this?
