Content of horizontal scroll div is cut - javascript

I am inserting into my HTML using javascript. My code is being truncated/ cut off.
Here's my code:
function feedbackDiv(feedback_id, feedback_title, feedback_content, feedback_author) {
return querySnapshot.forEach(function(doc) {
const data = doc.data();
var feedback_title = data.title;
var feedback_content = data.content;
var feedback_author = data.author;
document.getElementById("küchen_feedback_p").insertAdjacentHTML('beforeend', feedbackDiv(doc.id, feedback_title, feedback_content, feedback_author));
});
};
.küchen_co {
padding: 20px;
}
.küchen_feedback_p {
overflow-x: auto;
}
.feedback_container {
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
background-color: #212121;
color: #ffffff;
text-align: center;
}
.feedback_container:hover {
border: 1px solid #7ef6a9;
animation: color_change 1s;
background-color: #7ef6a9;
color: #212121;
}
<div class="küchen_co center">
<div class="küchen_feedback_p center" id="küchen_feedback_p" style="display: none;">
</div>
<div class="noDataContainer_kfeedback_p" id="noDataContainer_kfeedback_p" style="text-align:center;">
<img src="./broken_heart.png" width="80px" height="auto" />
<p class="nothing_found_k küchenH">Es wurden derzeit keine Feedbacks abgesendet.</p>
</div>
</div>
<div class="feedback_container" id="feedbackDiv" style="width:300px; height: 250px; margin-right: 20px;">
<p id="feedback_id" style="display: none;">${feedback_id}</p>
<h1 class="" style="word-wrap: break-word;">${feedback_title}</h1>
<p class="" style="word-wrap: break-word;">${feedback_content}</p>
<p class="" id="feedback_author" style="display: none;">${feedback_author}</p>
</div>
But the content of the scrolling div is cutted: https://www.dropbox.com/s/8f95tjojkbpku35/scroll.PNG?dl=0
~filip

For all with further issues. The problem might be the following lines of code:
justify-content: center;
align-items:center;
text-align:center;

Related

How to change color of div element depending on color of the block with JavaScript?

I have 2 blocks for user to choose from and they should be interactive. The block changes the color and the vertical line color should be changed to opposite. I wonder if I could make it right in the same code snippet which does the color change of the code block, because previously I made it, but with another for loop and it's not the fastest way.
let vanOption = document.getElementsByClassName("van-quote-option");
let quoteVl = document.getElementById("option-vl");
// Van option selection
for (var x = 0; x < vanOption.length; x++) {
vanOption[x].addEventListener("click", function() {
var currentOption = document.getElementsByClassName("option-active");
if (currentOption.length > 0) {
currentOption[0].className = currentOption[0].className.replace(" option-active", "");
}
this.className += " option-active";
});
}
.van-quote-option {
display: flex;
justify-content: space-evenly;
margin: 25px 165px 20px 165px;
border: 1px solid grey;
cursor: pointer;
transition: 0.5s;
}
.option-active {
background-color: #18A063;
color: #fff;
}
.quote-vl {
border-left: 2px solid #13985C;
height: 116px;
}
.quote-vl-active {
border-left: 2px solid #fff;
height: 116px;
}
.quote-icon {
margin: 25px 0 0 35px;
}
.quote-van-icon {
font-size: 49px;
padding: 8px;
border-radius: 50%;
height: 60px;
background-color: rgb(245, 245, 245);
color: #18A063;
}
.quote-car-icon {
font-size: 49px;
padding: 9px;
height: 52px;
background-color: rgb(245, 245, 245);
color: #18A063;
border-radius: 50%;
}
.quote-bicycle-icon {
font-size: 49px;
padding: 10px;
height: 55px;
background-color: rgb(245, 245, 245);
color: #18A063;
border-radius: 50%;
}
.quote-p {
text-align: left;
}
.quote-p-van {
text-align: left;
margin-top: 5px;
}
.bicycle-quote-vl,
.car-quote-vl {
height: 124px;
}
.quote-price {
display: flex;
flex-direction: column;
justify-content: center;
}
.quote-price-van {
margin-top: 10px;
}
.van-send-price,
.car-send-price,
.bicycle-send-price {
font-size: 25px;
font-weight: 700;
}
.van-send-price::before,
.car-send-price::before,
.bicycle-send-price::before {
content: "\00A3";
}
<div class="quote-options">
<div class="van-quote-option option-active">
<div class="quote-icon quote-icon-1">
<i class="fas fa-truck quote-van-icon"></i>
</div>
<div class="quote-p-van">
<div class="quote-p-1">Sending 1 or 2 items (with van)</div>
<br />
<div class="quote-p-2">
We'll take a maximum of 2 items for you<br />
to deliver immediately at any location.
</div>
</div>
<div class="quote-vl quote-vl-active"></div>
<div class="quote-price-van">
<span class="van-send-price" id="van-deliver-price">14</span><br />
For a max.<br />
of 2 items.
</div>
</div>
<div class="van-quote-option">
<div class="quote-icon quote-icon-1">
<i class="fas fa-truck quote-van-icon"></i>
</div>
<div class="quote-p-van">
<div class="quote-p-1">Hire a van</div>
<br />
<div class="quote-p-2">
We'll take a maximum of 2 items for you<br />
to deliver immediately at any location.
</div>
</div>
<div class="quote-vl"></div>
<div class="quote-price-van">
<span class="van-send-price" id="van-deliver-price">38</span><br />
Hire a van,<br />
∞ items
</div>
</div>
</div>
You can fix this with css.
You don't really need the quote-vl-active class. Remove it.
You can refer to the vertical line when it's active using option-active since it's the child of that element.
.option-active > .quote-vl {
border-left: 2px solid white;
height: 116px;
}
See this fiddle: https://jsfiddle.net/29r1v0Lo/
might want to use onclick vs. adding listeners as well.
Here is a jsfiddle of it a bit cleaner and with the vert bar having the opposite color: https://jsfiddle.net/7L0uzkxj/
You can just have the CSS control the vert bar:
.quote-vl {
border-left: 2px solid green;
height: 116px;
}
.option-active .quote-vl {
border-left: 2px solid white;
height: 116px;
}
You can then clean up the JS to look like this:
function triggerMe(evt) {
let vanOption = document.getElementsByClassName("van-quote-option");
[...vanOption].forEach(x => {
if (x.classList.contains('option-active')) {
x.classList.remove('option-active');
}
})
evt.classList.toggle('option-active');
}

How to animate the filling of a background color on a div

I am working on a custom Angular component that currently looks like the following:
The small green portion that you see on the left is my attempt to have a separate div overlap so that when I click on one of the white circular selectors, the green is filled up until that point.
Here is the code I have:
var shell = document.querySelector('.shell');
var inner = document.querySelector('.inner-shell');
shell.addEventListener('click', function(ev) {
alert("in");
if (ev.path && ev.path[0].className === 'indicator') {
var targetNode = ev.srcElement;
var centerX = targetNode.offsetLeft + targetNode.offsetWidth;
var centerY = targetNode.offsetTop + targetNode.offsetHeight;
inner.style.width = `${centerX + 40}px`;
}
});
.inner-shell {
background-color: #6FBC92;
width: 50px;
transition: 1s;
}
.shell {
background-color: #DCDCDC;
border-radius: 20px;
display: inline-flex;
}
.indicator {
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 20px;
height: 13px;
margin: 3px 28px;
width: 13px;
}
<div class="inner-shell">
<div class="shell">
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
</div>
Here is what I am getting with the code above (I clicked on the last indicator to get to this state):
How can I instead place inner-shell on top of the shell but still underneath the indicators ?
Thanks
You can put the inner-shell inside shell and use position:absolute to make overlap on the indicators
See code snippet:
var shell = document.querySelector('.shell');
var inner = document.querySelector('.inner-shell');
shell.addEventListener('click', function(ev) {
if (ev.path && ev.path[0].className === 'indicator') {
var targetNode = ev.srcElement;
var centerX = targetNode.offsetLeft + targetNode.offsetWidth;
var centerY = targetNode.offsetTop + targetNode.offsetHeight;
inner.style.width = `${centerX + 40}px`;
}
});
.shell .inner-shell {
background-color: #6FBC92;
width: 10px;
transition: 1s;
position: absolute;
top: 0;
left: 0;
display: inline-block;
height: 100%;
border-radius: 20px;
}
.shell {
background-color: #DCDCDC;
border-radius: 20px;
display: inline-flex;
position: relative;
}
.indicator {
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 20px;
height: 13px;
margin: 3px 28px;
width: 13px;
position:relative;
z-index:111;
}
<div class="shell">
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="inner-shell"></div>
</div>
You can use linear-gradient, here is a simplified example that you can adjust:
var shell = document.querySelectorAll('.container div');
for(var i=0;i<shell.length;i++) {
shell[i].addEventListener('click', function(ev) {
var centerX = ev.target.offsetLeft - ev.target.parentNode.offsetLeft + 15;
ev.target.parentNode.style.backgroundSize =centerX+'px 100%';
});
}
.container {
margin:5px auto;
height:30px;
width:300px;
border-radius:30px;
background-image:linear-gradient(green,green);
background-position:left;
background-size:0px 100%;
background-repeat:no-repeat;
background-color:grey;
display:flex;
justify-content:space-around;
transition:1s all;
}
.container > div {
height:30px;
width:30px;
border-radius:50%;
background:#fff;
}
<div class="container">
<div></div><div></div><div></div><div></div>
</div>

Create a custom drop down menu and place dataset value in input

I'm trying to create a custom drop down menu, using HTML, CSS and Vanilla Javascript.
I've managed to get the menu to appear when the user clicks on the the "from" input field, however when I try and click on an option, it wont let you add the value stored in the "code" dataset.
I did get it to work by using setTimeout method, however it is a bit hit and miss sometimes and doesn't seem like a good solution.
Is there an alternative way to get it to work?
function app() {
var messages = document.querySelector(".messages");
var inputFrom = document.querySelector(".input-from");
var inputTo = document.querySelector(".input-to");
var nearestContainer = document.querySelector(".nearest-container");
inputFrom.addEventListener("focus", inputToFocusIn, false);
function inputToFocusIn(e) {
messages.innerHTML = "focusin event triggered on input-from";
// add class
inputFrom.classList.add("input-from--focusin");
nearestContainer.classList.add("nearest-container--active");
// remove class
inputFrom.classList.remove("input-from--focusout");
nearestContainer.classList.remove("nearest-container--hidden");
}
inputFrom.addEventListener("focusout", inputToFocusOut, false);
function inputToFocusOut(e) {
messages.innerHTML = "focusout event triggered on input-from";
// add class
inputFrom.classList.remove("input-from--focusin");
nearestContainer.classList.remove("nearest-container--active");
// remove class
inputFrom.classList.add("input-from--focusout");
nearestContainer.classList.add("nearest-container--hidden");
}
var nearestStations = document.querySelectorAll(".nearest-station");
// add event listener to buttons
for(var nearestStation of nearestStations) {
nearestStation.addEventListener("click", addToInputFrom, false);
}
function addToInputFrom(e) {
inputFrom.classList.add("input-from--focusout");
nearestContainer.classList.add("nearest-container--hidden");
inputFrom.classList.remove("input-from--focusin")
nearestContainer.classList.remove("nearest-container--active")
var targetDataset = e.currentTarget.dataset.code;
messages.innerHTML = "station added to input from field"
inputFrom.value = "";
inputFrom.value = targetDataset;
}
var switchButton = document.querySelector(".button-switch");
switchButton.addEventListener("click", clickSwitch, false);
function clickSwitch(e) {
var inputFromValue = inputFrom.value;
var inputToValue = inputTo.value;
inputFrom.value = inputToValue;
inputTo.value = inputFromValue;
}
}
window.onload = app();
/* stylesheet */
body {
font-family: "GRAPHIK";
font-style: normal;
font-weight: 400;
font-size: 16px;
color: #242424;
}
* {
box-sizing: border-box;
outline: none;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: #FF4136;
}
.search-container {
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 300px;
padding: 10px;
background-color: #FFF;
border-radius: 10px;
}
.form-container {
display: flex;
flex-direction: row;
width: 100%;
}
.input-container {
width: 100%;
}
.input {
width: 100%;
border: none;
border-radius: 10px;
background-color: #f1f1f1;
padding: 10px;
}
.input-from {
margin-bottom: 5px;
}
.input-from--focusout {
border-radius: 10px;
}
.input-from--focusin {
border-radius: 10px 10px 0 0;
}
.input-to {
margin-bottom: 5px;
}
.switch-container {
margin-bottom: 5px;
}
.button {
border: none;
background-color: transparent;
}
.button-switch {
height: 100%;
width: 38px;
margin-left: 5px;
background-color: #f1f1f1;
border-radius: 10px;
background-image: url(../assets/images/switch.svg);
background-position: center;
background-size: 20px;
background-repeat: no-repeat;
}
.button-switch:hover {
background-image: url(../assets/images/switch-hover.svg);
}
.button-search {
padding: 10px;
background-color: #2ECC40;
color: #FFF;
border-radius: 10px;
width: 100%;
transition: background-color 0.5s ease;
}
.button-search:hover {
background-color: #33e147;
}
.input-container-to {
position: relative;
}
.nearest-container {
position: absolute;
top: 38px;
background-color: #f1f1f1;
padding: 5px;
border-radius: 0 0 10px 10px;
width: 100%;
z-index: 100;
}
.messages {
width: 300px;
background-color: #FFF;
padding: 5px;
border-radius: 10px;
text-align: center;
margin-bottom: 5px;
font-size: 10px;
}
.finding, .show-more {
width: 100%;
font-size: 10px;
font-style: italic;
margin: 0;
padding: 5px;
}
.show-more {
text-align: center;
}
.nearest-station {
font-size: 10px;
padding: 5px;
border-radius: 10px;
}
.nearest-container--hidden {
display: none;
}
.nearest-station--active {
display: flex;
}
.nearest-station:hover {
background-color: #FFF;
cursor: pointer;
}
.logo {
margin-right: 5px;
}
.nr-logo {
width: 15px;
}
.station-distance {
font-style: italic;
float: right;
}
<div class="container">
<div class="messages">messages here</div>
<div class="search-container">
<div class="form-container">
<div class="input-container">
<div class="input-container-to">
<input type="text" class="input input-from" placeholder="From">
<div class="nearest-container nearest-container--hidden">
<div class="stations-container">
<p class="finding">Finding stations closest to you...</p>
<!-- stations here-->
<div class="nearest-station" data-code="Leigh-on-Sea">
<span class="logo"><img class="nr-logo" src="assets/images/nr-logo.svg"></span>
<span class="station-name">Leigh-on-Sea</span>
<span class="station-distance">0.6km</span>
</div>
<div class="nearest-station" data-code="Chalkwell">
<span class="logo"><img class="nr-logo" src="assets/images/nr-logo.svg"></span>
<span class="station-name">Chalkwell</span>
<span class="station-distance">1.5km</span>
</div>
<div class="nearest-station" data-code="Westcliff">
<span class="logo"><img class="nr-logo" src="assets/images/nr-logo.svg"></span>
<span class="station-name">Westcliff</span>
<span class="station-distance">2.7km</span>
</div>
<div class="nearest-station" data-code="Southend Central">
<span class="logo"><img class="nr-logo" src="assets/images/nr-logo.svg"></span>
<span class="station-name">Southend Central</span>
<span class="station-distance">3.6km</span>
</div>
<div class="nearest-station" data-code="Southend Victoria">
<span class="logo"><img class="nr-logo" src="assets/images/nr-logo.svg"></span>
<span class="station-name">Southend Victoria</span>
<span class="station-distance">3.8km</span>
</div>
</div>
<div class="stations-show-more">
<!--
<p class="show-more">Show more stations</p> -->
</div>
</div>
</div>
<div class="input-container-to">
<input type="text" class="input input-to" placeholder="To">
</div>
</div>
<div class="switch-container">
<input type="button" class="button button-switch">
</div>
</div>
<div class="button-search-container">
<input type="button" class="button button-search" value="Search">
</div>
</div>
</div>
Using setTimeout in the inputToFocusOut() function is indeed the correct way to obtain the desired effect: hiding of the menu must be delayed so that a click on a menu item will register and its callback will fire. There should be nothing hit and miss about it, just set the delay at a reasonable value, say 300ms, and remove the hiding of the menu from the addToInputFrom() callback. Actually, you can remove all of the latter function's class-toggling calls, as they are redundant there and may interfere. The menu will be shown/hidden by virtue of inputFrom gaining/losing focus.
BTW, why are you using focusout and not blur?
Using focusout event here
inputFrom.addEventListener("focusout", inputToFocusOut, false);
is not right. Because it will be triggered before click event.
When the function inputToFocusOut is executed the .nearest-container becomes hidden:
nearestContainer.classList.add("nearest-container--hidden");
and that's why click event for it and all of its child nodes (we are interested in .nearest-station elements) won't be triggered. Instead of focusout, use mousedown event. With blur event it won't work.

Swapping an image when a toggle has been clicked on

I have the following code where I added a plus symbol to one of my service titles. I was informed by someone that when that service is clicked on I should have a minus sign take its place to show that it can be minimized. I am unsure of how to swap out the plus sign when the description has been expanded. Does anyone have any ideas of how I could do that?
Here is a snippet. Click on one of the service names to see the description expand.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.slideToggle(500);
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">
<img src="http://realtorcatch.com/icons/plusSymbol.png" alt="Service" style="width:10px;height:10px;">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
Here is the working example, i change a little de html and Js
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
var t = $(this);
if(t.hasClass('open'))
{
t.removeClass('open');
t.find('.status').html("+");
}else {
t.addClass('open');
t.find('.status').html("-");
}
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.slideToggle(500);
});
the working example
I'd suggest simply toggling a class to achieve this.
You can add the icon as a background image of a pseudo element inserted into the .service_title element. Then you can simply toggle a class in order to change the icon. Update the background image URLs accordingly. See the updated example for the modified jQuery; it's still only 5 lines.
The relevant CSS:
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
Updated Example:
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
$('.service_description').not(thisDescription).hide().parent().removeClass('closed');
thisDescription.slideToggle(500).parent().toggleClass('closed');
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
You could just change it within your click binding...
Let's say your using images, just add a data-attribute you can query when you need to, like this...
HTML
<div class="service_wrapper">
<img data-state="plus" class="state" src="plus.png" alt="More"/>
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
JS
$('.service_wrapper').click(function() {
var state = $(this).find('.state');
if(state.data('state') == 'plus')
state.attr({ 'src': 'minus.png', 'alt': 'Less' }).data('state', 'minus');
else
state.attr({ 'src': 'plus.png', 'alt': 'More' }).data('state', 'plus');
});

filter string only filter the string without spaces

as you can see on my snippets, I could search only for the first name e.g. full name"ABDOL JABAR BAKARI" and the first name is "abdol" and only the name "abdol" is utilize in the filter function which it must all the string inside that data attribute named "data-fullname" will filtered. any ideas, clues, help, suggestions, recommendation to make it search the whole string inside the data attribute named "data-fullname" and search also from the string inside the data attribute named "data-job"?
$(document).ready(function(){
$('.search_employee').on('input', function() {
var value = this.value.toLowerCase();
$('.profile').hide().filter(function() {
var name = $(this).attr('data-fullname').toLowerCase();
return value.trim().length < 1 || name.indexOf(value) === 0;
}).show();
});
});
.profile{
width: 200px;
float: left;
display: block;
margin: 5px;
border: 1px solid #ccc;
padding: 10px 0px;
}
.profile h1{
font-size: 15px;
color: 555;
padding: 5px;
margin: 0px;
text-align: center;
text-transform: uppercase;
}
.profile p{
font-size: 13px;
color: 555;
padding: 5px;
margin: 0px;
text-align: center;
text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control search_employee" placeholder="Search here...">
<div id="profile_holder">
<div class="profile" data-fullname="Abdol Jabar Bakari" data-job="system developer">
<h1>Abdol Jabar Bakari</h1>
<p>System Developer</p>
</div>
<div class="profile" data-fullname="Jason Fang" data-job="database analysis">
<h1>Jason Fang</h1>
<p>Database Analysis</p>
</div>
<div class="profile" data-fullname="Mechelle Newyurk" data-job="sales officer">
<h1>Mechelle Newyurk</h1>
<p>Sales Officer</p>
</div>
<div class="profile" data-fullname="Juliver Galleto" data-job="ui/ux">
<h1>Juliver Galleto</h1>
<p>UI/UX</p>
</div>
</div>
A simple change required. Instead of checking for name.indexOf(value) !== -0;, you should check for name.indexOf(value) !== -1;
$(document).ready(function(){
$('.search_employee').on('input', function() {
var value = this.value.toLowerCase();
$('.profile').hide().filter(function() {
var name = $(this).attr('data-fullname').toLowerCase();
return value.trim().length < 1 || name.indexOf(value) !== -1;
}).show();
});
});
.profile{
width: 200px;
float: left;
display: block;
margin: 5px;
border: 1px solid #ccc;
padding: 10px 0px;
}
.profile h1{
font-size: 15px;
color: 555;
padding: 5px;
margin: 0px;
text-align: center;
text-transform: uppercase;
}
.profile p{
font-size: 13px;
color: 555;
padding: 5px;
margin: 0px;
text-align: center;
text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control search_employee" placeholder="Search here...">
<div id="profile_holder">
<div class="profile" data-fullname="Abdol Jabar Bakari" data-job="system developer">
<h1>Abdol Jabar Bakari</h1>
<p>System Developer</p>
</div>
<div class="profile" data-fullname="Jason Fang" data-job="database analysis">
<h1>Jason Fang</h1>
<p>Database Analysis</p>
</div>
<div class="profile" data-fullname="Mechelle Newyurk" data-job="sales officer">
<h1>Mechelle Newyurk</h1>
<p>Sales Officer</p>
</div>
<div class="profile" data-fullname="Juliver Galleto" data-job="ui/ux">
<h1>Juliver Galleto</h1>
<p>UI/UX</p>
</div>
</div>
The problem is the condition name.indexOf(value) === 0 which matches the search term to only the start of the string.
If the searched term is not found indexOf will retrn -1, so just check the returned value is > 1 to check whether the term is present in the string like name.indexOf(value) > -1;
$(document).ready(function() {
$('.search_employee').on('input', function() {
var value = this.value.toLowerCase().trim();
if (value) {
//do this only if a filter condition is present
$('.profile').hide().filter(function() {
var name = $(this).data('fullname').toLowerCase();
return name.indexOf(value) > -1 || $(this).data('job').toLowerCase().indexOf(value) > -1;
}).show();
} else {
$('.profile').show();
}
});
});
.profile {
width: 200px;
float: left;
display: block;
margin: 5px;
border: 1px solid #ccc;
padding: 10px 0px;
}
.profile h1 {
font-size: 15px;
color: 555;
padding: 5px;
margin: 0px;
text-align: center;
text-transform: uppercase;
}
.profile p {
font-size: 13px;
color: 555;
padding: 5px;
margin: 0px;
text-align: center;
text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control search_employee" placeholder="Search here...">
<div id="profile_holder">
<div class="profile" data-fullname="Abdol Jabar Bakari" data-job="system developer">
<h1>Abdol Jabar Bakari</h1>
<p>System Developer</p>
</div>
<div class="profile" data-fullname="Jason Fang" data-job="database analysis">
<h1>Jason Fang</h1>
<p>Database Analysis</p>
</div>
<div class="profile" data-fullname="Mechelle Newyurk" data-job="sales officer">
<h1>Mechelle Newyurk</h1>
<p>Sales Officer</p>
</div>
<div class="profile" data-fullname="Juliver Galleto" data-job="ui/ux">
<h1>Juliver Galleto</h1>
<p>UI/UX</p>
</div>
</div>

Categories