I am trying to accomplish designing a filter/search feature that allows the user to easily search through a list for an item. I was told that I could accomplish this by using a Bootstrap combo box, however I have not seen any that have the ability to show the user values as soon as they start typing. The only ones I have found online where you had to click a button to see a drop down of the values.
This is the code I tried using, it works but instead I would like it to drop down the list only when I click the search input field. I am trying to make it without a button.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Filterable List</h2>
<p>Type something in the input field to search the list for specific items:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<ul class="list-group" id="myList">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList li").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
</html>
I tried adding this Javascritpt function, but it did not work.
Snippet:
function myFunction() {
document.getElementById("myList").classList.toggle("show");
}
You can hide automatically by triggering the toggle function in the page load. And to show the list you can use the toggle function again in focus event and to hide it again you can use it on the focus out event
<script>
$(document).ready(function(){
$("#myList").toggle();
$("#myInput").on("focus", function() {
$("#myList").toggle();
});
$("#myInput").on("focusout", function() {
$("#myList").toggle();
});
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList li").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
Related
Right now, my code allows someone to create an li by submitting a movie title and its rating. A remove button also appears at the end of this li. I want this li to be removed once the remove button is clicked on. I understand how to do this with Javascript, however how do you do this with jQuery? The ways I have attempted this are:
$('li button').click( function(e) {
e.target.closest('.li').remove();
})
$('li').on("click", "button", function() {
$(this).remove()
})
I know there are other ways in Jquery to remove the li, but what is wrong with the above two methods? is it how I selected the items? My entire HTML and JS are below. Thanks in advance!
$('#movieForm').submit(function(event) {
event.preventDefault();
let movieInput = $("#movieTitle").val();
let ratingInput = $("#rating").val();
$('#movieList').append("<li>" + movieInput + " " + ratingInput + "<button>Remove</button></li>");
})
$('li button').click( function(e) {
e.target.closest('.li').remove();
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Movies App!</title>
<link rel="stylesheet"
href="https://unpkg.com/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<h1>Movies App!</h1>
<ul id="movieList">
</ul>
<form id="movieForm">
<input id="movieTitle" placeholder="Movie Title">
<input id="rating" placeholder="Rating">
<input type="submit" id="submit"></button>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="MoviesApp.js"></script>
</body>
</html>
Your use of on() is almost correct, there's just two flaws. Firstly the primary selector should be the closest parent element to the target which exists in the DOM when the page loads, in this case the ul. You also need to remove the entire li when the event happens, not the button, so use closest(). Try this:
jQuery($ => {
$('#movieForm').submit(e => {
e.preventDefault();
let movieInput = $("#movieTitle").val();
let ratingInput = $("#rating").val();
$('#movieList').append(`<li>${movieInput} ${ratingInput}<button>Remove</button></li>`);
})
$('ul').on("click", "li button", e => $(e.target).closest('li').remove());
});
<link rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.css">
<h1>Movies App!</h1>
<ul id="movieList"></ul>
<form id="movieForm">
<input id="movieTitle" placeholder="Movie Title">
<input id="rating" placeholder="Rating">
<input type="submit" id="submit" />
</form>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
Note that I used arrow functions and template literals in the above example. Neither are relevant to the issue you had, they're just some syntactic sugar to make the logic more succinct.
could you please tell me how to filter list on keydown event in jquery ?I want to make autocomplete to filter my list by input field
here is my code
https://jsbin.com/wamaficase/edit?html,js,output
$(function () {
$('#user').keyup(function (e) {
var $item =$('#item li');
var val =this.value;
var $newItem =$item.filter(function (i,item) {
console.log($(item).text())
return $(item).text().indexOf(val)!= -1;
})
console.log($newItem)
});
});
I am getting the updated list in newItem variable how to show in view ?
Expected out
when user type h it show hello ,bhnm,chuy item in list
I used jQuery to toggle a hidden class on those list items to only render those that have the typed text.
$(function() {
$('#user').keyup(function(e) {
var $items = $('#item li');
var val = this.value;
var $newItems = $items.each(function(i, item) {
if (!val || $(item).text().indexOf(val) === -1) {
$(item).addClass('hidden');
} else {
$(item).removeClass('hidden');
}
})
});
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
</head>
<body>
<div>
<input type="text" id="user" />
</div>
<ul id="item">
<li class='hidden'>hello</li>
<li class='hidden'>pwny</li>
<li class='hidden'>chuy</li>
<li class='hidden'>myuio</li>
<li class='hidden'>bhnm</li>
<li class='hidden'>ssd</li>
<li class='hidden'>iopo</li>
</ul>
</body>
</html>
I have created a html webpage here:
http://diagrams.inse1d.info/wbt.html
Code:
<!DOCTYPE html>
<html>
<head>
<title>WBT Charts</title>
<link rel="stylesheet" type="text/css" href="wbt.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="wbt.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
<div id="wbtBlock">
<p>Press enter to save amendments</p>
<h1>Title of wbt:<input type="text" id="wbtTitle" /></h1>
<div id="graph">
<p>Graph to go here</p>
</div>
<p><strong>Notes: </strong></p>
<p><span><input type="textarea" id="wbtNote" /></span></p>
</div>
</article>
</section>
<button>Add New WBT Chart</button>
</body>
Here is the jQuery code I wrote:
$(document).ready(function() {
$("h1").keypress(function(e) {
//get
wbtTitle = $('#wbtTitle').val();
// Write text after enter
if (e.which == 13) {
$("h1").text(wbtTitle);
}
});
$("span").keypress(function(e) {
//get
wbtNote = $('#wbtNote').val();
// Write note after enter
if (e.which == 13) {
$("span").text(wbtNote);
}
});
//Insert new WBT on button click
$("button").each(function() {
$(this).click(function() {
var wbtSet = $( "article" ).html();
$(wbtSet).insertAfter('section');
});
});
});
What I want to do is set the title and some note text using input boxes which works using jQuery. I then want to add a copy of the html into another article when the button is pressed without copying the inputs previously made with the possibility of setting new values when the article is cloned. The process should repeat over and over again.
Here is an image to help explain:
I am quite new to jQuery, I think you need to use a loop to fix this, I read that a .each() can be used http://api.jquery.com/jQuery.each/ but not quite sure.
Any help will be appreciated. Thanks.
I think I got your answer.
I changed the html a bit, because you duplicated some id's with your approach, that's not good. id's have to be unique on a page. I simply changed them to classes.
<!DOCTYPE html>
<html>
<head>
<title>WBT Charts</title>
<link rel="stylesheet" type="text/css" href="wbt.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="wbt.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
<div class="wbtBlock">
<p>Press enter to save amendments</p>
<h1>Title of wbt:<input type="text" class="wbtTitle" /></h1>
<div class="graph">
<p>Graph to go here</p>
</div>
<p><strong>Notes: </strong></p>
<p><span><input type="textarea" class="wbtNote" /></span></p>
</div>
</article>
</section>
<button>Add New WBT Chart</button>
</body>
And of course the jQuery. I got rid of your first two functions because they had no purpose in this context.
$(document).ready(function() {
//Insert new WBT on button click
$("button").on('click', function() {
var title = $(this).prev().find('.wbtTitle').val();
var note = $(this).prev().find('.wbtNote').val();
var wbtSet = $(this).prev("section").html();
$(this).prev().find('.wbtTitle').replaceWith(title);
$(this).prev().find('.wbtNote').replaceWith(note);
$(this).prev("section").after('<section>' + wbtSet + '</section>');
});
});
Here is a working fiddel
Fixing the answer given by hitokun_s
window.onload = function() {
// Save a copy of the element wbtSet element on pageload
var wbtSet = $("article").clone();
$("button").each(function() {
$(this).click(function() {
// Append a new one to the holder of the wbSets
$(wbtSet).appendTo($('section'));
});
});
}
I think this is what you want to do.
window.onload = function() {
$("button").each(function() {
$(this).click(function() {
var wbtSet = $("article:first-child").clone();
wbtSet.find("input").val("");
$(wbtSet).appendTo($('section'));
});
});
}
I have created a listview in jquery with a listdivider with a filter. The filter works as expected but as soon as you collapse either of the list dividers, the search subsequently does not work at all,
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=" <link rel="stylesheet" href="<%=request.getContextPath()%>/css/mobile/jquery.mobile.structure-1.3.1.min.css" />
<script src="<%=request.getContextPath()%>/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
jQuery(document).bind("mobileinit", function () {
jQuery.mobile.ajaxEnabled = false;
});
</script>
<script src="<%=request.getContextPath()%>/js/mobile/jquery.mobile-1.3.1.min.js"></script>
<script>
var hide=0;
var dpwClone='';
$(function(){
$('[data-role="list-divider"]').click(function(element){
$(this).nextUntil('[data-role="list-divider"]').toggle();
$("#eServiceList").listview("refresh");
// $(this).nextUntil('[data-role="list-divider"]').toggle();
});
$( "#eServiceList" ).listview( "option", "filterCallback", searchList);
function searchList( text, searchValue, item ) {
var result = text.toString().toLowerCase().indexOf( searchValue.toString().toLowerCase() );
var show = false;
var hide = true;
if (result == -1 )
return hide;
return show;
};
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Problem nested list views</h1>
</div>
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-inset="true" data-divider-theme="d" data-filter="true" id="eServiceList">
<li data-role="list-divider" id="dpw" >
DPW
</li>
<li>Inbox</li>
<li>Outbox</li>
<li data-role="list-divider" id="custo">
Customs
</li>
<li>Friends</li>
<li>Work</li>
</ul>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
Below is the JSfiddle link.
http://jsfiddle.net/jsfiddle_one/R8pZH/
Using .toggle() adds to the element an inline style attribute style="display: none;" or style="display: block;". List items are already enhanced with display: block; by jQuery Mobile. Hence, when using .toggle() - when it is visible again - the element will get display: block; twice, inline and in CSS style sheet.
To overcome this problem, use .toggleClass() classes rather than inline styling. I fixed your problem by adding a class
.hide { display: none !important; }
and I used it with .toggleClass('hide');
New code
Using custom CSS classes to override existing CSS is safer, and keep in mind that for jQuery Mobile, it's better to end each property with !important to force override.
I have 5 links which act as a bit of a navigation bar, they are a light blue to start with, when one of them is hovered over or clicked I would like them to change color and retain that color until another link is selected.
I have had a good search for a solution and there are many but they all seem to be for a particular case and I just can't seem to adapt them.
Any help would be greatly appreciated.
heres my html here, I have a css file making it look pretty as well.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs({
event: "mouseover"
});
});
</script>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Menu bar</title>
<style type="text/css" />
</style>
<link href="navPanelStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="tabs">
<div id="topBar">
<ul>
<li>BOOKINGS</li>
<li>ROOMS</li>
<li>NEWS</li>
<li>SPECIALS</li>
<li>ABOUT US</li>
</ul>
</div>
<div id="content_Wrapper">
<div id="Booking">
<p>Bookings</p>
</div>
<div id="Rooms">
<p>Rooms</p>
</div>
<div id="news">
<p>news</p>
</div>
<div id="Specials">
<p>Specials</p>
</div>
<div id="About_us">
<p>About us</p>
</div>
</div>
</div>
</body>
</html>
If you can use Jquery to do this you can try this way, to retain a style for selected tab.
Demo
JS
$("#tabs").tabs({
event: "mouseover",
select: function (event, ui) {
$('.active').removeClass('active');
$(ui.tab).addClass('active'); // ui.tab in the select event will be currently selected tab.
// Do stuff here
}
});
Css
#tabs .active {
color:Blue;
}
if you want to apply over the entire tabe you can apply your styles to li tab element as follows:-
$(ui.tab).closest('li').addClass('active');
Demo2
You need to set up a piece of hover-over listener JavaScript code that removes active class from the element that was last activated and add it to the one that's hovered over.
Like the following:
$(".menuitem").hover(
function() {
$(this).addClass("active_menuitem");
},
function() {
$(this).removeClass("active_menuitem");
}
)
A menuitem can be anything that the CSS related to the active menu item class can be applied to