Develop Reference

How can I hide search results until I've entered text?

Basically, this code makes it so that all results show and get trimmed down when you search for something specific. I want to hide all results before I've started writing and when I've entered at least one letter results show up again. I've been stuck at that exact problem for hours and have concluded with nothing.
I'd really appreciate the help.
function Function() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('Input');
filter = input.value.toUpperCase();
ul = document.getElementById("UL");
li = ul.getElementsByTagName('li');
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";
}
}
}
#Input {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 30%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
justify-content: center;
height: 20px;
}
#media screen and (max-width: 600px) {
#Input {
width: 80%;
margin-top: 4px;
}
}
;
#UL {
list-style-type: none;
padding: 0;
margin: 0;
}
#UL li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
width: 30%;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
}
#UL li a:hover:not(.header) {
background-color: #eee;
}
<input type="text" id="Input" onkeyup="Function()" placeholder="Search...">
<ul id="UL" style="list-style: none;">
<li class="listClass">SONY a6000</li>
<li class="listClass">SONY a6400</li>
<li class="listClass">SONY a7 IV</li>
<li class="listClass">Canon EOS RP</li>
<li class="listClass">Nikon D3500</li>
<li class="listClass">Hasselblad X1D II 50C</li>
</ul>

Given your html structure you can do this in one line of css:
#Input:focus:placeholder-shown + ul {
display:none;
}
It works because you have placeholder text on your input element, and the <ul> is adjacent to it. Read more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

If I understand correctly, Initially all the results will be shown? Then when you start typing they will be hidden(not entered any letter) and after entering atleast one element they start showing again? In that case you can use onfocus event along with onkeyup event.
function Function() {
let input, filter, ul, li, a, i, txtValue;
input = document.getElementById('Input');
filter = input.value.toUpperCase();
ul = document.getElementById("UL");
li = ul.getElementsByTagName('li');
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1 && filter!=='') {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
#Input {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 30%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
justify-content: center;
height: 20px;
}
#media screen and (max-width: 600px) {
#Input {
width: 80%;
margin-top: 4px;
}
}
;
#UL {
list-style-type: none;
padding: 0;
margin: 0;
}
#UL li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
width: 30%;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
}
#UL li a:hover:not(.header) {
background-color: #eee;
}
<input type="text" id="Input" onkeyup="Function()" onfocus="Function()" placeholder="Search...">
<ul id="UL" style="list-style: none;">
<li class="listClass">SONY a6000</li>
<li class="listClass">SONY a6400</li>
<li class="listClass">SONY a7 IV</li>
<li class="listClass">Canon EOS RP</li>
<li class="listClass">Nikon D3500</li>
<li class="listClass">Hasselblad X1D II 50C</li>
</ul>
If you want to show all the results again when unfocusing the input field (and not any letter in the input field) then you can use onblur event to achieve that as well by modifying input field like below and add the function.
function Function2()
{
let input, filter, ul, li, a, i, txtValue;
input = document.getElementById('Input');
filter = input.value.toUpperCase();
ul = document.getElementById("UL");
li = ul.getElementsByTagName('li');
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";
}
}
}
<input type="text" id="Input" onkeyup="Function()" onfocus="Function()" onblur="Function2()" placeholder="Search...">

search text march Entire text

developers. I need help. I have given below the code. when I type anything in the search box typed value matches the beginning of a list item. But I want when I type anything in the search box typed value to match any part of the search item and the text color will be red. I try so many times to do it.
function myFunction(e) {
// find all `li` > a elements
let col=document.querySelectorAll('ul#myUL li a');
// iterate through all elements; re-hide & remove className from each.
col.forEach(n=>{
n.parentNode.style.display='none';
n.classList.remove('bold');
// if the typed value matches the beginning of a list item; display the text & assign Bold className
if( this.value.length > 0 && this.value.trim()!='' && n.textContent.toLowerCase().startsWith( this.value.toLowerCase() ) ){
n.parentNode.style.display='block';
// make the whole word bold
//n.classList.add('bold');
// make the matched portion bold
n.innerHTML = `<span class="bold">${this.value}</span>` + n.textContent.substr(this.value.length)
}
});
}
document.querySelector('input[name="search"]').addEventListener('keyup',myFunction);
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li{
display:none;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
.bold{font-weight:bold;color:red
<input name='search' type="text" placeholder="Search for names.." title="Type in a name" />
<ul id="myUL">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>

Use includes() instead of startsWith(). To display the found text, you need to display the text before as well as the text after.
function myFunction(e) {
// find all `li` > a elements
let col=document.querySelectorAll('ul#myUL li a');
// iterate through all elements; re-hide & remove className from each.
col.forEach(n=>{
n.parentNode.style.display='none';
n.classList.remove('bold');
// if the typed value matches the beginning of a list item; display the text & assign Bold className
if( this.value.length > 0 && this.value.trim()!='' && n.textContent.toLowerCase().includes( this.value.toLowerCase() ) ){
n.parentNode.style.display='block';
// make the whole word bold
//n.classList.add('bold');
// make the matched portion bold
n.innerHTML = n.textContent.substr(0,n.textContent.toLowerCase().indexOf(this.value.toLowerCase()))+`<span class="bold">${this.value}</span>` + n.textContent.substr(n.textContent.toLowerCase().indexOf(this.value.toLowerCase())+this.value.length)
}
});
}
document.querySelector('input[name="search"]').addEventListener('keyup',myFunction);
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li{
display:none;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
.bold{font-weight:bold;color:red
<input name='search' type="text" placeholder="Search for names.." title="Type in a name" />
<ul id="myUL">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>

In Javascript there is a string method includes() which returns true if the substring is present in a specific string and returns false if not.
The below code will list only those items that contains the query entered by the user and highlight where there search query is present in that list item
function myFunction(e) {
// find all `li` > a elements
let col = document.querySelectorAll('ul#myUL li a');
// iterate through all elements; re-hide & remove className from each.
col.forEach(n => {
n.parentNode.style.display = 'none';
n.classList.remove('bold');
// if the typed value matches the content of a list item; display the text & assign Bold className
if (n.textContent.toLowerCase().includes(this.value.toLowerCase())) {
console.log(n.textContent)
n.parentNode.style.display = 'block';
n.innerHTML = `${n.textContent.replace(this.value, `<span style="color: red;">${this.value}</span>`)}`
}
});
}
document.querySelector('input[name="search"]').addEventListener('keyup', myFunction);

Not able to enter values in second textbox

I have created a searchbox and I have made it absolute and added one more text box on the bottom , I am unable to click and enter the value in the text box.
Note: Position must be the same, Click for the Second Text box is not working
Here is the jsFiddle Link
Here is the code snippet
var placeArr = ["Adele","Agnes","Billy","Bob","Calvin","Christina","Cindy"];
function myFunction() {
let input, filter, ul, li, liElem, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
liElem = li[i];
txtValue = liElem.textContent || liElem.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "block";
} else {
li[i].style.display = "none";
}
}
}
function showDiv(){
let liList=(document.getElementById("myUL")).getElementsByTagName("li");
for(var i=0;i<liList.length;i++){
(liList[i]).style.display="block";
}
}
function hideDiv(){
let liList=(document.getElementById("myUL")).getElementsByTagName("li");
for(var i=0;i<liList.length;i++){
(liList[i]).style.display="none";
}
}
var selectPlace = function(ids){
document.getElementById("myInput").value=document.getElementById(ids).innerHTML;
hideDiv();
}
var generateList = function(array, eventfn){
let cnt=0;
array.forEach(function(item){
var node = document.createElement("LI"); // Create a <li> node
var textnode = document.createTextNode(item); // Create a text node
node.appendChild(textnode);
node.setAttribute("id", "myLi"+(cnt++));
node.addEventListener("click", ()=>{eventfn(node.getAttribute("id"))});
document.getElementById("myUL").appendChild(node);
});
};
generateList(placeArr,selectPlace);
* {
box-sizing: border-box;
}
#myInput,.myInput {
background-position: 10px 12px;
background-repeat: no-repeat;
width: 50%;
font-size: 16px;
padding: 12px 20px 12px 10px;
border: 1px solid #ddd;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
width:50%;
height:200px;
overflow-y:auto;
position:absolute;
}
#myUL li {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: none;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
<h2>My Phonebook</h2>
<div>
<input type="text" id="myInput" class="myInput" onkeyup="myFunction()" onclick=showDiv() placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
</ul>
</div>
<br/>
<div>
<input type="text" class="myInput">
</div>
I have added the Image

Currently, your ul tag is overriding the div underneath. So for:
<div style="z-index: 1; position: relative;">
<input type="text" class="myInput">
</div>
just add the z-index and position to have it on top. You will have to add in a style to the ul tag though onclick to override it when it is in use.
.override{
z-index: 10;
position: relative;
}
function showDiv(){
let liList=(document.getElementById("myUL")).getElementsByTagName("li");
for(var i=0;i<liList.length;i++){
(liList[i]).style.display="block";
}
li = document.getElementById('myUL'); // added this line
li.classList.add("override"); // added this line
}
function hideDiv(){
let liList=(document.getElementById("myUL")).getElementsByTagName("li");
for(var i=0;i<liList.length;i++){
(liList[i]).style.display="none";
}
li = document.getElementById('myUL'); // added this line
li.classList.remove("override"); // added this line
}
https://jsfiddle.net/tgq65jas/

The second text box is being obscured by the myUL element. In the hideDiv function, each of the li elements have their display set to none, but myUL is still there.
Rather than setting display: none for each li, set display: none on the entire ul.

Trying to Fix the (Auto Search & Auto Sort ) Code with my current HTML code

I need some help, actually I am stuck with this school project. I am trying to use the attached code, creating an auto-search website. Initially i have trouble with sorting out the tables, but eventually was fixed. However, i still have the Auto Sort issue. If i search for something, e.g. i search for "1", a list of "1" will appear. However, i wanted the page to auto sort based on the highest value to the lowest (descending). Here are the edited codes: http://plnkr.co/edit/HeFy7mONHCJDweqi03Zp?p=preview
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL ll a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a.header {
background-color: #e2e2e2;
cursor: default;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
</style>
</head>
<body>
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<table border="0">
<tr>
<td><li>2000</li></td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>3000</td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>1000</li></td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>1500</li></td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>1400</li></td>
<td><ll>Hotmail</ll></td>
</tr>
<tr>
<td><li>2500</li></td>
<td><ll>Hotmail</ll></td>
</tr>
</table>
</ul>
<script>
function myFunction() {
var input, filter, ul, li, ll, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
ll = ul.getElementsByTagName("ll");
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";
}
}
}
</script>
</body>
</html>

So am I right that you want to search for a Number (e.g. 2000) and the result should be: 2000 / Hotmail (matching your number)?
Edit: I saw u re not setting the display style for your 'll' elements.
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
ll[i].style.display = ""; // <- this is new
} else {
li[i].style.display = "none";
ll[i].style.display = "none"; // <- this is new
}}
Here is the live result: http://plnkr.co/edit/HeFy7mONHCJDweqi03Zp?p=info

How to make list item selectable in Input Tag

I create a InputFilter. Here is my code.
MyFilter = function(args) {
var dataUrl = args.url;
var divID = args.divID;
var div = document.getElementById(divID);
//var input = '<input type="text" id="myInput" onclick="myFunction()" title="Type in a name">';
var myTable = '<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">' +
'<ul id="myUL">' + '<li>' + '' + '</li>' + '</ul>';
div.innerHTML = myTable;
function foo(callback) {
var httpRequest = new XMLHttpRequest();
httpRequest.open('GET', "data.json", true);
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) {
callback(httpRequest.responseText);
}
};
httpRequest.send();
}
foo(function(data) {
debugger;
var jsonc = JSON.parse(data);
var new_opt = "";
for (i = 0; i < jsonc.length; i++) {
new_opt += '<li>' + jsonc[i]['VALUE'] + '</li>';
}
document.getElementById('myUL').innerHTML = new_opt;
});
myFunction = function() {
debugger;
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";
}
}
}
}
I want when i click on list item, these items geteselected and displayed into inputfield,like combo box.
Can anybody please help me how to do that.
Here is my fiddler. JS FIDDLE
Note : Currently with my code I am able to search, I want to select and display in input.
It is happening in other project but there I am using table.
Code for that is
document.querySelectorAll('#myTable tr:not(.header)').forEach(function(_tr) {
_tr.addEventListener('click', function() {
document.getElementById('myInput').value += " ; " + this.getElementsByTagName('td')[0].textContent;
});
});
I want to click on items of a tag and selected items want to display in input tag by ; separation.

Playground
function filterList(value, list) {
var li, i, match;
for (i = list.children.length; i--; ) {
li = list.children[i];
match = li.textContent.toLowerCase().indexOf(value.toLowerCase()) > -1;
li.classList.toggle('hidden', !match)
}
}
function selectItem(input, value){
input.value = value;
}
var input = document.querySelector('input'),
list = document.querySelector("#myUL");
input.addEventListener('input', function(e){
filterList(e.target.value, list);
})
list.addEventListener('click', function(e){
if( e.target.tagName == 'A' && !e.target.classList.contains('header') )
selectItem( input, e.target.textContent )
})
* {
box-sizing: border-box;
}
input {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li.hidden{ display:none; }
#myUL li a.header {
background-color: #e2e2e2;
cursor: default;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
<h2>My Phonebook</h2>
<input placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<li>A</li>
<li>Adele</li>
<li>Agnes</li>
<li>B</li>
<li>Billy</li>
<li>Bob</li>
<li>C</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>

try this one
using jquery you can set selected name fill in textfield
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";
}
}
}
$('a').click(function() {
var val = $(this).text();
$('#myInput').val(val);
})
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
/* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a.header {
background-color: #e2e2e2;
cursor: default;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<li>A</li>
<li>Adele</li>
<li>Agnes</li>
<li>B</li>
<li>Billy</li>
<li>Bob</li>
<li>C</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>