stidges / jquery-searchable Goto Github PK
View Code? Open in Web Editor NEWTiny, fast jQuery plugin to search through elements as you type.
License: MIT License
Tiny, fast jQuery plugin to search through elements as you type.
License: MIT License
Hi,
Would it be possible to add a configuration option that highlights the text that matches what is in the box?
Cheers,
Olga
Hi, I'm new to javascript
I'm trying to use jquery-searchable for a product table but the search does not work
I know this is not a jquery-searchable problem but I would greatly appreciate your help
Sorry for my english I'm Argentine
<!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 href="css/bootstrap.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.searchable-1.1.0.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
$( '#table' ).searchable({
striped: true,
oddRow: { 'background-color': '#f5f5f5' },
evenRow: { 'background-color': '#fff' },
searchType: 'fuzzy'
});
});
</script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">DiegoDrogadicto</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Restaurant</a></li>
<li><a href="#">Ventas</a></li>
<li><a href="productos.html">Productos</a></li>
<li><a href="#">Clientes</a></li>
<li><a href="#">Reportes </a></li>
<li><a href="#">Usuarios</a></li>
<li >
<div class="btn-group navbar-btn">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">julio</button>
<ul class="dropdown-menu">
<li><a href="#">Salir</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="productos.html">Productos</a></li>
<li><a href="#">Ingredientes</a></li>
<li><a href="#">Platos</a></li>
<li><a href="#">Menus</a></li>
<li><a href="#">Viandas</a></li>
</ul>
<div class="row">
<div class="col-lg-12">
<h3>Table / Fuzzy search example</h3>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<input type="search" id="search" value class="form-control" placeholder="Search using Fuzzy searching">
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table class="table" id="table">
<thead>
<tr>
<th>First column</th>
<th>Second column</th>
<th>Third column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Introducing</td>
<td>jQuery</td>
<td>Searchable</td>
</tr>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
<td>Dolor</td>
</tr>
<tr>
<td>Some</td>
<td>More</td>
<td>Data</td>
</tr>
</tbody>
</table>
<hr>
</div>
</div>
</div>
</body>
</html>
There's a trailing comma after "jquery.searchable-ie.js" which should be removed:
Skipped branch dev-master, "https://api.github.com/repos/stidges/jquery-searchable/contents/bower.json?ref=16388727dd88f736d670186957fe5b77cb6caed4" does not contain valid JSON
Parse error on line 13:
...earchable-ie.js", ], "keywords": [
---------------------^
Expected one of: 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '[' - It appears you have an extra trailing comma
Hi,
I am loving your project, thank you very much for your efforts.
I am using this to search in a table that has words in English, Spanish and German. The issue I encounter is that if I have the following words:
If I search for "Rocio" it will not find the one with the accented i. The same issue exists for umlauts. Like if I search for: "zuruck" it will not find "zurück".
If I press CTRL-F and use the normal (chrome) browser search functionality to search for "Rocio" it will find all accented and un-accented matches.
Could you add an option to your configuration to support this please?
Cheers,
Olga
Hi guys.
Is it possible to clean the search from code?
If I do $('#burgerSearchInput').val('')
the search is not reset.
How can I do it?
The effect oddRow/evenRow doesn't work when the table is inside a hidden div (tabulation for example).
Edit: Fix found. Original code:
d=this.settings.selector+":visible";
Changed code:
d=this.settings.selector;
FYI
$ pwd
.../bower_components/jquery-searchable
$ ls -l
total 64
-rw-rw-r-- 1 mschwartz staff 1355 Mar 17 11:52 Gruntfile.js
-rw-rw-r-- 1 mschwartz staff 1074 Mar 17 11:52 LICENSE
-rw-rw-r-- 1 mschwartz staff 5957 Mar 17 11:52 README.md
-rw-rw-r-- 1 mschwartz staff 548 Mar 17 11:52 bower.json
drwxrwxr-x 4 mschwartz staff 136 May 21 13:10 dist
-rw-rw-r-- 1 mschwartz staff 5858 Mar 17 11:52 jquery.searchable.js
-rw-rw-r-- 1 mschwartz staff 735 Mar 17 11:52 package.json
no jquery-searchable-ie.js!
Currently when using addClass
and removeClass
in the show()
and hide()
functions, the rows aren't correctly reset when the search is empty. A reset()
function would allow for more flexibility in the show()
and hide()
functions.
JQuery search shows the entire line searched but not only the cell alone
Is there a trick to to only show the content of the <td> = ConfigMap for my search
and not the line <tr>
?
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Snowdrop Team">
<title>Snowdrop Search Site</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link href="css/narrow-jumbotron.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1>jQuery Searchable Plugin</h1>
</div>
<p>You can find the source of this plugin at <a href="http://github.com/stidges/jquery-searchable"
target="_blank">Github</a>
(http://github.com/stidges/jquery-searchable)!</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h3>Table / Fuzzy search example</h3>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<input type="search" id="search" value="" class="form-control" placeholder="Search using Fuzzy searching">
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table class="table table-borderless" id="table">
<tbody>
<tr>
<td>
<a href="https://github.com/snowdrop/spring-boot-http-booster">HTTP Api</a>
<p>Mission to expose a REST Greeting endpoint using SpringBoot and Apache Tomcat in embedded
mode</p>
</td>
<td>
<a href="https://github.com/snowdrop/spring-boot-http-secured-booster">Secured HTTP Api</a>
<p>Mission to expose a REST Greeting endpoint using SpringBoot & Secured by Red Hat SSO</p>
</td>
<td>
<a href="https://github.com/snowdrop/spring-boot-crud-booster">JPA</a>
<p>Mission to play with Spring Boot & JPA</p>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/snowdrop/spring-boot-crud-booster">JPA</a>
<p>Mission to play with Spring Boot & JPA</p>
</td>
<td>
<a href="https://github.com/snowdrop/spring-boot-configmap-booster">Config Map</a>
<p>Quickstart to expose a REST Greeting endpoint using Spring Boot where the message is defined
as a Kubernetes Config Map property</p>
</td>
<td>
<a href="https://github.com/snowdrop/spring-boot-health-check-booster">Health Check</a>
<p>Quickstart to demonstrate OpenShift health probes working with Spring Boot Actuator</p>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/snowdrop/spring-boot-circuit-breaker-booster">Circuit Breaker</a>
<p>Service implemenmting Hystrix Circuit Breaker</p>
</td>
<td>
<a href="https://github.com/snowdrop/spring-boot-blank-booster">Blank</a>
<p>Blank Spring Boot mission</p>
</td>
</tr>
</tbody>
</table>
<hr>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/tether-1.4.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-searchable-1.1.0.min.js"></script>
<script>
$(function () {
$('#table').searchable({
striped: true,
searchType: 'fuzzy'
});
});
</script>
</body>
</html>
Hey this is a great tool - but I wondered if it was possible to use it to filter through with further inputs.
For example if you have your regular #search-input for example. But on further search you wanted to filter by another class and input.
E.g:
All
Accounting
So your items searched through what was typed in search-input. But when you select a search-subject option it would refilter and drill down further.
I could do this manually with:
$('.element').each(function(){
if($(this).is(':visible')){
if(
$(this).hide();
//manually trigger search
}
else if(
$(this).show();
//manually trigger search
}
});
But I would need to re-trigger the search to re-apply the original filter.
Is there a way to do that?
I have a problem,
After I add the searchable function, add new items but these are no longer added to the search filter.
As updates the list of items?
I want to search in menu title and submenu, but in JQuery Searchable Plugin can't find this option. When I type characters, I can find menu but can't find submenu. Searchable plugin has childSelector option but this option is searching just the first level.
I have been using this for a couple months now, and has always worked great!
However, today i transferred my webpage to a new location, and suddenly the script stopped working.
I have verified that all files are correctly in place, and no additional code was changed / altered, so i expected this to work without a hitch.
I will note... the script was previously used on non secure site. Now, i am on a secure site behind a security certificate. Would that have caused the script to stop working?
So I have been using this plugin becuase it is a great light weight plugin for searcing. I am using a long list with a button that will clear the search box for them.
I noticed that when they hit the clear box, it clears the input, but there is no way for me to let the plugin, that the input has been cleared, so the last search result stays on screen until they type something else.
Is there a way to rest the search plugin to show everything?
Because the searchActiveCallback
, searchEmptyCallback
, searchBlurCallback
and searchFocusCallback
are global variables, different instances of the plugin will interfere.
For example, if a plugin instance gets initialized with a onSearchEmpty
callback and another instance gets initialized after that without a onSearchEmpty
callback, it will not be called for the first instance anymore.
This can be solved by moving the variables into the plugin instance.
Hi,
The plugin works absolutely perfect for non-IE8 browsers. Anyway it can be enabled for IE8?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.