Jquery search, hide div by id - javascript

I'm having troubles with the following code.
I'm populating a webpage with some elements from an array:
$a = array("Volvo", "BMW", "Toyota");
foreach($a as $item) {
echo '<div class="column col-3" id="'.$item.'" >';
}
and i have a simple search box:
<input class="form-input" id="filter" type="text" placeholder="filter">
It is possible to hide elements by id when user starts input?
$( document ).ready(function() {
$("#filter").keyup(function() {
each element in webpage
if div id contains userinput
keepelement
else
hideit
Can someone help?

$('#filter').keyup(function(){
$('div').each(function(){
var str = $(this).attr('id').toLowerCase();
if(str.indexOf($('#filter').val().toLowerCase())){
$(this).removeClass('d-none');
}
else{
$(this).addClass('d-none');
}
});
});
just use this code. This is for all div tags in html. if you want just for .column classed div's use $('div.column')

Try like this -
<input class="form-input" id="filter" type="text" placeholder="filter"/>
<?php
$a = array("Volvo", "BMW", "Toyota");
foreach ($a as $item) {
echo '<div class="column col-3" id="' . $item . '" >' . $item . '</div>';
}
?>
<script>
$(function () {
$("#filter").keypress(function (e) {
const val = e.target.value;
$('div.column').each(function (ind, ele) {
if (ele.id.includes(val)) {
$(ele).hide();
} else {
$(ele).show();
}
});
});
});
</script>

Here is a working code. You'd better use keyup function.
In keypress event on #filter div, it iterates div with .column class and checks if its id contains a value of filter div. If it contains, it will be hidden and others will be shown.
<input class="form-input" id="filter" type="text" placeholder="filter"/>
<?php
$a = array("Volvo", "BMW", "Toyota");
foreach ($a as $item) {
echo '<div class="column col-3" id="' . $item . '" >' . $item . '</div>';
}
?>
<script>
$(function () {
$("#filter").keypress(function (e) {
const val = e.target.value;
$('div.column').each(function (ind, ele) {
if (ele.id.includes(val)) {
$(ele).hide();
} else {
$(ele).show();
}
});
});
});
</script>

Related

PHP JavaScript MYSQL: Two search filed with autocompletement

In my website the user need to put in the apposite field the Name and the Set of a card. Foor doing this, i've implemented a search field for the 2 inpunt field that can help the user, linked to the Mysql database. The problem is when the user select a value: This value appears in both the serch filed like in the photo that I provide below.
The user select the name:
Result on both the search field
This codes in php/Javascript is for the input fields.
<div class="col-4">
<div class="form-group">
<!-- Doveva esserci name="search"-->
<input class="form-control" id="set_name" type="text" name="set_name" placeholder="Exact Set Name in English">
<div class="list-group" id="show-list">
<!-- Here autocomplete list will be display -->
</div>
<!-- country = set_name, countryList = show-list -->
</div>
</div>
<!-- script per auto completamento query = searchText-->
<script>
$(document).ready( function(){
$("#set_name").keyup(function(){
var searchText = $(this).val();
if(searchText != '')
{
$.ajax({
url:'php/action.php',
method:'POST',
data:{query_set:searchText},
success:function(data)
{
$("#show-list").fadeIn();
$("#show-list").html(data);
}
});
}
else{
$("#show-list").fadeOut();
$("#show-list").html('');
}
});
$(document).on('click','li',function(){
$("#set_name").val($(this).text());
$("#show-list").fadeOut();
});
});
</script>
<!-- <a href='#' class='list-group-item list-group-item-action'> -->
<div class="col-4">
<div class="form-group">
<input class="form-control" type="text" id="card_name" name="card_name" placeholder="Exact Card Name in English">
<div class="list-group" id="show-list-card">
<!-- Here autocomplete list will be display -->
</div>
</div>
</div>
<!-- script per auto completamento query = searchText-->
<script>
$(document).ready( function(){
$("#card_name").keyup(function(){
var searchText = $(this).val();
if(searchText != '')
{
$.ajax({
url:'php/action.php',
method:'POST',
data:{query_card:searchText},
success:function(data)
{
$("#show-list-card").fadeIn();
$("#show-list-card").html(data);
}
});
}
else{
$("#show-list-card").fadeOut();
$("#show-list-card").html('');
}
});
$(document).on('click','li',function(){
$("#card_name").val($(this).text());
$("#show-list-card").fadeOut();
});
});
</script>
This php code instead is in another file, to select the right value from the database, but i think it is irrilevant to solve the problem.
<?php
require "dbh.php";
if(isset($_POST['query_set'])){
$input_text = $_POST['query_set'];
$sql = "SELECT DISTINCT Set_name FROM card WHERE Set_name LIKE '%$input_text%' ";
$result = $connessione->query($sql);
$output = '<ul class="list-unstyled"';
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
$output .= '<a><li>' . $row['Set_name'] .'</li></a>';
}
}
else{
$output .= '<li>Set Not Found</li>';
}
$output .= '</ul>';
echo $output;
}
if(isset($_POST['query_card'])){
$input_text = $_POST['query_card'];
$sql = "SELECT DISTINCT Card_name FROM card WHERE Card_name LIKE '%$input_text%' ";
$result = $connessione->query($sql);
$output = '<ul class="list-unstyled"';
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
$output .= '<a><li>' . $row['Card_name'] .'</li></a>';
}
}
else{
$output .= '<li>Card Not Found</li>';
}
$output .= '</ul>';
echo $output;
}
I think that the problem is that:
$(document).on('click','li',function(){
$("#set_name").val($(this).text());
$("#show-list").fadeOut();
});
and its equivalent for #card_name attach events to any li; both of these event handlers will run any time an li is clicked.
I've not used jQuery in a while, but perhaps:
$("#show-list").on('click','li',function(){
$("#set_name").val($(this).text());
$("#show-list").fadeOut();
});
and the equivalent for #card_name would work.

hide div from div when there is no search result

I've tried so many methods from stackoverflow and other websites but whenever i succeed in hiding the div. No search result is displayed at all.
I've tried the :empty selector and fiddling around with the php code and js code. but since i'm very new to this i just can't seem to crack the error. What am i doing wrong?
My HTML
<div class='search'>
<form class="searchbox" action='index.php' method='post' autocomplete='off'>
<input type='text' name='search' class='searchform' placeholder='Søg efter skole...' onkeyup="searchq();">
</form>
<div id="output"></div>
</div>
PHP
<?php
include("connection.php");
$output = '';
//collect
if(isset($_POST['searchVal'])) {
$searchq = $_POST['searchVal'];
$searchq = preg_replace("#[^a-zA-Z0-9æøå]#i"," ", $searchq);
$query = mysqli_query($mysqli, "SELECT * FROM `products` WHERE name LIKE '%$searchq%'") or die("could not search");
$count = mysqli_num_rows($query);
if($_POST['searchVal'] == NULL) {
$output = '';
} else {
while($row = mysqli_fetch_array($query)) {
$name = $row['name'];
$id = $row['id'];
$output .= ''.$name.'<br>';
}
}
}
echo "<div class='output'>$output</div>";
?>
And JS
function searchq() {
var searchTxt = $("input[name='search']").val();
$.post("search.php", {
searchVal: searchTxt
}, function(output) {
$("#output").html(output);
});
}
HTML
<div class='search'>
<form class="searchbox" action='index.php' method='post' autocomplete='off'>
<input type='text' name='search' class='searchform' placeholder='Søg efter skole...' onkeyup="searchq();">
</form>
<div id="output" style="display: none;"></div>
</div>
PHP
.....
echo $output;
JS
function searchq() {
var searchTxt = $("input[name='search']").val();
$.post("search.php", {
searchVal: searchTxt
}, function(output) {
$("#output").html(output);
if(output.length > 0) {
$("#output").show();
}
});
}

Dropdown populated with database data that adds on button click

I am confused how to populate my dropdown that adds on button click with database values . I used jQuery to do the adding function of dropdown on button click. but it seems like i cant populate the options of the select tag inside my jQuery with database values. Please help me out...
This is my php page
<?php include("connect.php");
$smt = $conn->prepare('select CompanyName From Company');
$smt->execute();
$data = $smt->fetchAll();
?>
<div class="form-group" id='TextBoxesGroup'>
<label for="layer" class="col-sm-3 control-label">Layer</label>
<div id="TextBoxDiv1" class="col-sm-6">
<select class="form-control" id='textbox1' name="company" placeholder="Company" >
<?php foreach ($data as $row): ?>
<option><?=$row["CompanyName"]?></option>
<?php endforeach ?>
</select>
</div><hr/>
</div>
<div class="form-group" >
<div class="col-md-9 text-right">
<input type='button' class="btn btn-default" value='Add +' id='addButton'>
</div>
</div>
The jQuery code used to add dropdown on button click is:
EDIT:
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>5){
alert("Only 5 Layers allowed");
return false;
}
var companies = [<?php echo "'".join("','",$data)."'";?>];
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<div class="form-group" id="TextBoxesGroup"><label class="col-sm-3 control-label">Layer '+ counter + ' : </label>' +' <div id="TextBoxDiv1" class="col-sm-6"><select class="form-control" name="textbox' + counter + '" id="textbox' + counter + '" name="company" placeholder="Company">');
$.each(companies, function(key, value){
newTextBoxDiv.append('<option>'+value+'</option>');
});
newTextBoxDiv.append('</select> </div></div>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
});
</script>
But the output shows like this:
Thanks
Well, you need to echo out the value of $row['companyName'] (the one inside your foreach loop)
Another implementation would be... say you have an array of values in your PHP.
$data = array("company A", "company B", "company C");
And the javascript...
<script>
var companies = [ <?php echo "'". join("','", $data) . "'";?> ];
//This generates : ['company A', 'company B', 'company c'];
function insertOptions()
{
$.each(companies, function(key, value){
$("#IDofSelectTag").append("<option>"+value+"</option>");
});
}
</script>

i want submit form on last select onchange i have multilple selects, options are generated dynamically

Submit form on last select onchange: I have multiple selects, options are generated dynamically.
var children = $H(<?php echo json_encode($tree['children']) ?>);
function showCat(obj, level) {
var catId = obj.value;
level += 1
if ($('cat_container_' + level)) {
$('cat_container_' + level).remove();
}
if (children.get(catId)) {
var options = children.get(catId);
var html = '<select id="cat_' + catId + '" onchange="showCat(this, ' + level + ')">';
for (var i = 0; i < options.length; i++) {
html += '<option value="' + options[i].entity_id + '">' + options[i].name + '</option>';
}
html += '</select>';
html = '<div id="cat_container_' + level + '">' + html + '</div>';
$('sub_cat').insert(html);
}
}
im using select onchange at the same time adding select also this code submit only first level select. I have many levels inside them and options are generated dynamically. I want to submit on last select onchange.
<form id="search_mini_form" action="<?php echo $catalogSearchHelper->getResultUrl() ?>" method="get">
<select id="first_cat" onchange="showCat(this, 2);this.form.submit()" name="<?php echo $catalogSearchHelper->getQueryParamName() ?>" value="<?php echo $catalogSearchHelper->getEscapedQueryText(); ?>" class="input-text" >
<?php foreach ($tree['first'] as $cat): ?>
<option value="<?php echo $cat->getId() ?>"><?php echo $cat->getName() ?></option>
<?php endforeach ?>
</select>
<button type="submit" title="<?php echo $this->__('Search') ?>" class="button"><span><span><?php echo $this->__('Search') ?></span></span></button>
</form>
var select = document.getElementsByTagName('select')[0];
function myFunction(e){
if(e.value == select.options[select.options.length-1].text){
alert("Last value selcted")
}
}
var select = document.getElementsByTagName('select')[0];
function myFunction(e){
if(e.value == select.options[select.options.length-1].text){
alert("Last value selcted")
}
}
<select onchange="myFunction(this)">
<option>item1</option>
<option>item2</option>
<option>item3</option>
<option>item4</option>
<option>item5</option>
</select>

changing the Placeholder attribute in html input field

i have a form that has an input field that uses a datalist, what i want to do is when something is selected from that field, update another input field with what was selected, here is what i have so far
<div class='form-row'>
<div class='col-xs-12 form-group required'>
<h2><label class='control-label'>Product code</label></h2>
<input id="ItemSelect" type=text list=jobs style='font-size:21px;height: 40px;'
class='form-control'
name="Code">
<datalist id=jobs>
<?php
foreach ($this->Products as $a) {
echo '<option value=' . $a["Code"] . '>' . $a["Code"] . " - " . $a["Name"] . ' </option>';
}
?>
</datalist>
</div>
<div class='col-xs-12 form-group required'>
<input id="Placeholder" readonly class='form-control'
placeholder="Prodcut Descirption">
</div>
<script>
$("#ItemSelect")
.change(function () {
var str = "";
$("datalist option:selected").each(function () {
str += $(this).text() + " ";
});
$("#Placeholder").attr("placeholder", str).val("").focus().blur();
})
.change();
</script>
this kind of works, it is selecting the right input field to detect the change, however it's not putting the value in. if i change
$("datalist option:selected")
to
$("select option:selected")
it does put the value of all the other select fields in there any ideas?
There is no such thing as option:selected in datalists.
You can get the selected value by looking at what's currently in the input instead:
$("#ItemSelect").change(function() {
var str = $(this).val() + " ";
$("#Placeholder").attr("placeholder", str).val("").focus().blur();
});
If you only want to do this when the input value is actually present in the datalist:
$("#ItemSelect").change(function() {
var str = $(this).val() + " ";.
$('datalist option').each(function() {
if($(this).text() === str) {
$("#Placeholder").attr("placeholder", str).val("").focus().blur();
}
});
});
<datalist id=jobs>
should change datalist tag to select tag
<select id=jobs>
once you change that the below statement will work
$("select option:selected")

Categories