stidges / jquery-searchable Goto Github PK

View Code? Open in Web Editor NEW

148.0 148.0 56.0 37 KB

Tiny, fast jQuery plugin to search through elements as you type.

License: MIT License

JavaScript 100.00%

filter javascript jquery search

jquery-searchable's People

Contributors

Stargazers

Watchers

jquery-searchable's Issues

Display cell of the table row but not the td line

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>

method to call if user resets text outside of search input

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?

Not search

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>

bower doesn't install the ie version

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!

Possible to search with multiple inputs? Or manually trigger the search?

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).find('.subject').text() != $('#search-subject').val()) {
$(this).hide();
//manually trigger search
}
else if($(this).find('.subject').text() == $('#search-subject').val()) {
$(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?

oddRow/evenRow when displayed at hidden div

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;

Add new item to list

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?

Search in menu & submenu with JQuery Searchable plugin - multilevel

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.

http://stackoverflow.com/questions/29799273/search-in-menu-submenu-with-jquery-searchable-plugin-multilevel

Highlight matches

Hi,
Would it be possible to add a configuration option that highlights the text that matches what is in the box?
Cheers,
Olga

How to clean the search from code?

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?

Invalid json in bower.json after "jquery.searchable-ie.js"

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

Allow defining a 'reset' function to allow for class based showing / hiding

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.

Not working for IE8

Hi,

The plugin works absolutely perfect for non-IE8 browsers. Anyway it can be enabled for IE8?

dynamically added content is not searchable

Option to find accented vowals by using un-accented vowals.

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:

Rocio
Rocío

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

Suddenly stopped working when moved to new site

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?

Callbacks aren't called after initializing a new instance without callbacks

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.

stidges / jquery-searchable Goto Github PK

jquery-searchable's People

Contributors

Stargazers

Watchers

Forkers

jquery-searchable's Issues

Recommend Projects

Recommend Topics

Recommend Org