Develop Reference

JavaScript no entries found in search

I have a simple search script and wanted when a user adds a search term that's not on the list to show: No items found.
JavaScript:
function mySearchFunction() {
// Declare variables
var input, filter, ul, li, item, i, txtValue;
// User Input
input = document.getElementById("myInput");
// Filter, makes search not case sensitive
filter = input.value.toUpperCase();
// Grabs the parent element by id
ul = document.getElementById("stateList");
// Individual item on list
li = ul.getElementsByTagName("li");
// Treats lists items like an array, where each item can be accessed through it's index
for (i = 0; i < li.length; i++) {
item = li[i];
// Iterate over each list item to see if the value of the input, ignoring case, matches the inner text or inner html of the item.
txtValue = item.textContent || item.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
// Displays list items that are a match, and nothing if no match
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
HTML:
<input type="text" id="myInput" onkeyup="mySearchFunction()" placeholder="Search">
<ul id="stateList">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
Original script found here: https://codepen.io/rachelhawa/pen/vYBjQMY

You could add a <p> for displaying no result, and have a flag as a condition to display it
Demo
function mySearchFunction() {
// Declare variables
var input, filter, ul, li, item, i, txtValue, noResultMsg;
// User Input
input = document.getElementById("myInput");
// Filter, makes search not case sensitive
filter = input.value.toUpperCase();
// Grabs the parent element by id
ul = document.getElementById("stateList");
// Individual item on list
li = ul.getElementsByTagName("li");
noResultMsg = document.getElementById('no-result-message')
noResultMsg.style.display = "none"
// Treats lists items like an array, where each item can be accessed through it's index
let noResult = true
for (i = 0; i < li.length; i++) {
item = li[i];
// Iterate over each list item to see if the value of the input, ignoring case, matches the inner text or inner html of the item.
txtValue = item.textContent || item.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
// Displays list items that are a match, and nothing if no match
li[i].style.display = "";
noResult = false
} else {
li[i].style.display = "none";
}
}
if (noResult) {
noResultMsg.style.display = ""
}
}
<input type="text" id="myInput" onkeyup="mySearchFunction()" placeholder="Search">
<ul id="stateList">
<li>Alabama</li>
<li>Alaska</li>
<li>Arizona</li>
<li>Arkansas</li>
<li>California</li>
<li>Colorado</li>
<li>Connecticut</li>
<li>Delaware</li>
<li>Florida</li>
<li>Georgia</li>
<li>Hawaii</li>
<li>Idaho</li>
<li>Illinois</li>
<li>Indiana</li>
<li>Iowa</li>
<li>Kansas</li>
<li>Kentucky</li>
<li>Louisiana</li>
<li>Maine</li>
<li>Maryland</li>
<li>Massachusetts</li>
<li>Michigan</li>
<li>Minnesota</li>
<li>Mississippi</li>
<li>Missouri</li>
<li>Montana</li>
<li>Nebraska</li>
<li>Nevada</li>
<li>New Hampshire</li>
<li>New Jersey</li>
<li>New Mexico</li>
<li>New York</li>
<li>North Carolina</li>
<li>North Dakota</li>
<li>Ohio</li>
<li>Oklahoma</li>
<li>Oregon</li>
<li>Pennsylvania</li>
<li>Rhode Island</li>
<li>South Carolina</li>
<li>South Dakota</li>
<li>Tennessee</li>
<li>Texas</li>
<li>Utah</li>
<li>Vermont</li>
<li>Virginia</li>
<li>Washington</li>
<li>West Virginia</li>
<li>Wisconsin</li>
<li>Wyoming</li>
</ul>
<p id="no-result-message" style="display: none">No result found</p>

You can add one more <li style="display: none">No result</li>
Additionally, you should add:
if (txtValue.toUpperCase().indexOf(filter) > -1) {
// Displays list items that are a match, and nothing if no match
li[i].style.display = "";
li[indexOfNoResult].style.display="none";
} else {
li[i].style.display = "none";
li[indexOfNoResult].style.display="";
}

Search Bar in HTML and JS

I created an HTML table with a lot of information about a country. Now I want the user to be able to search in this table for a piece of information like the Area.
function selectRow() {
var input, filter, table, trs, td;
input = document.getElementById("search");
filter = input.value.toUpperCase();
table = document.getElementById("dataRows");
trs = table.getElementsByTagName("tr");
for (let index = 0; index < trs.length; index++) {
td = trs[index].getElementsByTagName("td")[0];
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
trs[index].display = "";
} else {
trs[index].display = "none";
}
}
}
<input type="text" id="search" onkeyup="selectRow()" placeholder="Search.." />
<table id="dataRows">
<tr>
<th>Attributes</th>
<th>Value</th>
</tr>
<tr>
<td>Name</td>
<td>Australia</td>
</tr>
<tr>
<td>Area</td>
<td>7,741,220.00</td>
</tr>
<tr>
<td>Population</td>
<td>25,466,459</td>
</tr>
</table>
But when I try to use it I get the error: "Uncaught TypeError: Cannot read property 'innerHTML' of undefined"
I can't figure out why the td is undefined.

The most helpful thing to demonstrate first, I think, is a method that will let you diagnose this yourself in future. This sort of difficulty will occur all the time, so here is one method to help you generally problem solve these types of issues.
You know that <td> is not the value you expect, so check your expectation by outputting the values that you use to acquire <td>. You can do that by adding these console.log lines at the top of your loop:
for (let index = 0; index < trs.length; index++) {
console.log("trs[index]",trs[index]);
console.log("trs[index].getElementsByTagName(td)", trs[index].getElementsByTagName("td"));
With that, you should see that the first <tr> has <th> elements, not <td>! These surprises happen all the time, it's great to learn tricks to check your assumptions the quickest way you can.
Here's a very simple solution, the first and last line of this block are the same in your code:
for (let index = 0; index < trs.length; index++) {
var tds = trs[index].getElementsByTagName("td");
if(tds.length == 0) {
continue;
}
td = tds[0];
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
Looks like you've just started working through building this, I hope this helps!

<script>
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
use ur code like this to get best result and without any error
edit
I think the tricky part of this is actually the accepting of user input intelligently. Therefore, I'd say the best thing to do is to pass off your searching to an autocomplete-type plugin. Once the page is ready, you pass the focus to an input text box, and then let the plugin do its magic as you search...
For example, you could use the quicksearch plugin.
Then given a table of data and an input like this:
<input id="searcher" type="text" name="searcher">
You could have a ready function that looks like this:
$('#searcher').quicksearch('table tbody tr', {
'delay': 100,
'bind': 'keyup keydown',
'show': function() {
if ($('#searcher').val() === '') {
return;
}
$(this).addClass('show');
},
'onAfter': function() {
if ($('#searcher').val() === '') {
return;
}
if ($('.show:first').length > 0){
$('html,body').scrollTop($('.show:first').offset().top);
}
},
'hide': function() {
$(this).removeClass('show');
},
'prepareQuery': function(val) {
return new RegExp(val, "i");
},
'testQuery': function(query, txt, _row) {
return query.test(txt);
}
});
$('#searcher').focus();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Try it out here: http://jsfiddle.net/ZLhAd/369/

Can't filter search

I've been trying to get my search filter to work but can't get it to work. I'm a beginner but trying my best to make it work. Anyone out there that can help :)
The html
<div class="notes_search">
<input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
</div>
<ul class="notes_list">
</ul>
<p class="notes_empty-msg">Nothing to show.</p>
</section>
</div>
The Script down bellow.
function searchFilter() {
// Declare variables
var input, filter, ul, li, a, i;
input = document.getElementsById('search');
filter = input.value.toUpperCase();
ul = document.getElementsById('search')[0];
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter)===0) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}

There are a number of issues with your code.
First, it's getElementById not getElementsById, but you might find using querySelector and querySelectorAll easier to use as they match to CSS selectors (similar to jQuery).
Second, you don't have an element with a search id.
Third, your HTML contains no list items so it can't search for anything.
Here's a working version with annotations (using some more modern JS methods with which you might not be familiar but which can make the code more succinct). Note: it uses a class to make the items visible or not, and searches within the text content rather than just checking to see if it's at the start of the content which makes it a little more flexible.
function searchFilter() {
// You might find `querySelector` easier to use as it
// allows you to correspond elements with CSS selectors
const input = document.querySelector('#search');
const filter = input.value.toUpperCase();
const ul = document.querySelector('ul');
const lis = ul.getElementsByTagName("li");
for (i = 0; i < lis.length; i++) {
const item = lis[i];
const itemContent = item.textContent.toUpperCase();
// `textContent` might be more appropriate here
// You can use the newer string method `includes`
// to see if `filter` appears in the text content
if (filter.length && itemContent.includes(filter)) {
// Here I've used `classList` as the more modern
// method way of adding and removing classes
item.classList.add('visible');
} else {
item.classList.remove('visible');
}
}
}
li { display: none; }
.visible { display: block }
<div class="notes_search">
<input type="search" id="search" onkeyup="searchFilter()" placeholder="Search...">
</div>
<ul class="notes_list">
<li>Bob</li>
<li>Sue</li>
<li>Rita</li>
<li>Rita and Bob</li>
<li>John</li>
</ul>
<p class="notes_empty-msg">Nothing to show.</p>
</div>
Further reading
classList
String.includes
textContent

You have several things here that are incorrect:
It should be getElementById rather than getElementsById (not plural)
Your input element has the id of "search_input", but you're trying to find an element with the name "search". When looking for an element, it should be the exact name of id, and not a partial word containing it. So try input=document.getElementById('search_input');
Try using innerText rather than innerHtml: innerHtml returns in html format rather than plain text as I remember.
index.html
<div class="notes_search">
<input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
</div>
<ul class="notes_list">
<li>hi</li>
<li>hi</li>
<li>bye</li>
</ul>
<p class="notes_empty-msg">Nothing to show.</p>
</section>
</div>
index.js
function searchFilter() {
// Declare variables
var input, filter, ul, li, a, i, text;
input = document.getElementById('search_input');
filter = input.value.toUpperCase();
ul = document.getElementsByClassName('notes_list')[0];
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
text = a.textContent || a.innerText;
if (a.innerHTML.toUpperCase().indexOf(filter)===0) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
I also added some li and a tag items to your html, since you didn't have them and it can't find tags that isn't on the html.

I am not fully sure what you are trying to achieve but would a simple html datalist work for your problem:
<input list="your-choices" id="search_input" placeholder="Search...">
<datalist id="your-choices">
<option value="car">
<option value="tree">
<option value="street">
<option value="sky">
<option value="whatever">
</datalist>

You Can search by Jquery
var searchRequest = null;
$(function () {
var minlength = 3;
$("#sample_search").keyup(function () {
var that = this,
value = $(this).val();
if (value.length >= minlength ) {
if (searchRequest != null)
searchRequest.abort();
searchRequest = $.ajax({
type: "GET",
url: "sample.php",
data: {
'search_keyword' : value
},
dataType: "text",
success: function(msg){
//we need to check if the value is the same
if (value==$(that).val()) {
//Receiving the result of search here
}
}
});
}
});
});

How to use speech recognition results to filter/search element

I'm trying to make a read out website, with a long text that we can only read out, without any possible scrolling. But I'm not really good with pure JS and I'm a little bit lost. I tried speech recognition and in a second time to make a filter/search list.
In an other side, I'm taking each words of a <p> to separate them in <spans>, because I suppose I have to make something like "When you
hear <span>1</span>, you wait to hear <span>2</span>" and so on...
But for the moment, I'm making a list and not span, like that :
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Say something..." title="Type in a name">
<ul id="myUL">
<li>Hello world</li>
<li>Bye world</li>
<li>See you world</li>
</ul>
And JS :
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
Then, in a second time I tried to merge it with a speechRecognition input, without success :
<form>
<input type="button" id="btn" value="start" />
</form>
<div id="interimResult"></div>
<div id="finalResult">Let speak</div>
I did a fiddle where I separate the two function now because I didn't find anything...
But, Am I going in the good way... I have to manage long text and <li> are not good, when I'll make it with <span> or anything else, will it be the same method ?

You add a call to myFunction inside recognition.onresult, you also modify myFunction to accept recognized text as an argument, it will do the job:
function myFunction(filter) { // HERE WE TAKE FILTER AS AN ARGUMENT
var ul, li, a, i;
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
recognition.onresult = function(event) {
var interimTranscript = "";
for (var i = event.resultIndex; i < event.results.length; i++) {
var _transcript = event.results[i][0].transcript;
if (event.results[i].isFinal) {
finalTranscript = StringUtils.capitalize(_transcript);
myFunction(finalTranscript); // <-- HERE IT FILTERS
// USING SPEECH RECOGNITION RESULT
}
It is better to give your function myFunction more meaningful name though, for example filterView is much better name.

Filter/Search bar (list of <a> elements) - not working

I am trying to use this example by w3schools to add a search bar. I can't get it to work, I have changed it to match my elements but with no success. I have to have my js separate from the HTML document so no <script>
My issue is that It does not work, and I do not know how to debug it.
Here is my js file:
//search bar
function myFunction() {
// Declare variables
var input, filter, ul, div, li, a, span, i;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("container");
span = ul.getElementsByTagName('span');
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = span[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
span[i].style.display = "";
} else {
span[i].style.display = "none";
}
}
}
document.getElementById('myInput').addEventListener('keyup', myFunction);
And my HTML file
<div class="container">
<input type="text" id="myInput" placeholder="Search for names..">
<div id="container">
<span>Nico Nico Nii!!</span>
<span>Childish Gambino - Redbone</span>
<span>America F*ck Yeah!</span>
</div>
</div>

Firstly, you have a lot of unnecessary variables. You only need two, one to get the values of the list and the other to get value of filter. If there are more than one element, use class instead. See the working code below:
//search bar
function myFunction() {
var input, filter;
input = document.getElementsByClassName('myLinks');
filter = document.getElementById('myInput').value.toUpperCase();
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < input.length; i++) {
var currentElem = input[i];
var currentElemChild = input[i].children[0]
if (currentElemChild.innerHTML.toUpperCase().indexOf(filter) > -1) {
currentElem.style.display = "";
} else {
currentElem.style.display = "none";
}
}
}
document.getElementById('myInput').addEventListener('keyup', myFunction);
<div>
<input type="text" id="myInput" placeholder="Search for names..">
<ul id="container">
<li class="myLinks">Nico Nico Nii!!</li>
<li class="myLinks">Childish Gambino - Redbone</li>
<li class="myLinks">America F*ck Yeah!</li>
</ul>
</div>