nexts / jets.js Goto Github PK

Is there any chance I can implement something to display "Sorry, nothing found/no matches"? if there is nothing to match in the list? Currently it is just blank.

It would be much nicer. At least for debug purposes.

Есть ли возможность доработать поиск по всем диакритическим знакам? Для русского это удобно, когда в поиске вводишь е и при необходимости ищет и по ё. Или может необязательной опцией сделать хотя бы

Нашёл пример набора символов в другой библиотеке

var DIACRITICS = {
    'a': '[aÀÁÂÃÄÅàáâãäåĀāąĄ]',
    'c': '[cÇçćĆčČ]',
    'd': '[dđĐďĎ]',
    'e': '[eÈÉÊËèéêëěĚĒēęĘ]',
    'i': '[iÌÍÎÏìíîïĪī]',
    'l': '[lłŁ]',
    'n': '[nÑñňŇńŃ]',
    'o': '[oÒÓÔÕÕÖØòóôõöøŌō]',
    'r': '[rřŘ]',
    's': '[sŠšśŚ]',
    't': '[tťŤ]',
    'u': '[uÙÚÛÜùúûüůŮŪū]',
    'y': '[yŸÿýÝ]',
    'z': '[zŽžżŻźŹ]'
};

Hi, I'm running OS X 10.11.1 Beta and using Safari I get something like this:

On Firefox and Chrome Jets is still the fastest.

Hi,
Not sure if this is possible with css only (probably not), but it would be nice if, on the filtered result, I get a highlight of the searched text, like:

I am using vuetable and hence vuejs in my project. vuetable expects an endpoint for the data to display in table, so data is coming on the fly from server. when application is run and and i type first character, the whole table disappears i.e. display: none; after much hassle I noticed that in case of vuetable, data-jets="<name>" attribute is absent. I say so because I copied the same table on jsfiddle with same js code and it works just as amazing as the plugin is. Or I m missing something here? See attached images for further details!

display is not animatable. so some use height: 0 or transform: scale(0) or opacity: 0, or a combination of those, combined with transition

What if I delete the whole list and create a new one (with the same id of course)?

I tried the method update, and it didn't work.

Is it possible to reverse the search logic so that I can set all items to display: none in my CSS and then have jets.js add display: block to the search results.

An alternative would be to hide all my items with display:none and remove that as soon as any character is input in the search field. There maybe need to be a delay to stop all the results showing when only one character is input (thinking about it, a parameter to set how many characters are input before the search runs may be handy...).

But it would be nice if this was built in.

Would be great to pass instead of selector something like Element instance or even search string and then trigger search method. Maybe even call search with search string as an argument if searchTag is not specified. This will reduce dependency on DOM and selectors a bit.

var jets = new Jets({
	searchTag: '#searchInput',
	contentTag: '.searchable',
	diacriticsMap: {
	  a: 'Áá'
	},
	callSearchManually: true,
	didSearch: function(search_phrase) {
		// do strange things
});

Hi,
is it possible to display item pták as a result when I type ptak (without diacritics)?
I've included the diacriticsMap, but it seems it doesn't work. Neither if I have item ptak and type pták. Why?

Hello, I have 20 accordion style Items, each one has 3 sub-items, and each one has minimum other 3 sub-sub-items.

Now I would to search 1 word inside all list, and if result is in 3° level, I need to show the dependance, like this:

1° level - items
- 2° level - items
- 3° level items - search word

Do you think is it possibile with your script ?
Thank you very much

Hey Den,

would it be possible to incorporate html5 PushState to add the search string to the url? I've been using this to deeplink to search results with dynatable.js, which is quite handy: Just copy the URL after searching and share it via email to point other users to solutions within larger databases.

This is how dynatable.js does it: http://www.dynatable.com/#pushstate

https://travis-ci.org/NeXTs/Jets.js/builds/395544932

Can be an idea configure Jets to search in a Table column, deciding the column in the search method.

Example

var jets = new Jets({
  searchTag: '#jetsSearch',
  contentTag: '#jetsContent',
  columns: [0,2,5]
});

jets.search("key", [0,5]);
jets.search("key", [0]);

Jets.js is amazing, but working on a project i discovered that plugin doesn't works with letters with accents:

"lapiz" and "lápiz" doesn't bring the same results and it will be great if the plugin take the 'á' as a simple 'a' and viceversa.

Hi. I am now adding a feature i.e. filter to my tables. What I want is to filter the data based on some given options in the form of <select> tag. But I don't know how. Just for the details:

<div class="row">

<div class="column">
<input type="text" **id="jetsSearch"** placeholder="Search">
</div>

<div class="column">
<select class="ui compact selection dropdown">
<option selected="" value="all" **id="jetsSearch"**>All</option>
<option value="articles">10</option>
<option value="products">9</option>
</select>
</div>

</div>

<table class="ui celled striped table top-space">

          `<tbody **id="jetsContent"** style="text-align:center;">`
            `<tr v-for="student in studentList">`
              `<td class="colspan=3">`
                 `{{ student.name }}`
              `</td>`
              `<td class="colspan=3">`
                 `{{ student.fathername }}`
              `</td>`
              `<td class="colspan=3">`
                ` {{ student.class }}`
              `</td>`
            `</tr>`
         ` </tbody>`
        </table>

if I select 9 then table should show all data that contains 9 only. filtering with inputtag is working fine but Is it possible in Select tag or some other way.

Hey Den,

would it be possible to add support for the :not(selector)? That is, entering ":not('keyword')" would show all results that do not contain 'keyword'. CSS supports this natively, but I think the JS code would have to be updated for it to work...

Passing in a selector for the search and content is not robust. It would be great if you could either pass in a DOM object or a selector. I am in a situation where the query selector will not be able to find the elements passed (web components with shadow dom), however, I am able to manually pass in the DOM objects to the Jets constructor.

Сделай пожалуйста работу с несколькими списками, например несколько UL элементов по которым надо делать поиск.

Я конечно сделал кастыль:

_getContentTags: function(query) {
      return Array.prototype.slice.call(document.querySelectorAll(this.content_param + '> *')); 
    },

I have a table of data that I want to be able to search by two columns at once.
See the table here.

It seems like this depends on the properties of the first jets object since either way, the second object has the same props as the first.

Code:

...
<h4 for="jetsSearch">Search with your 2 letter state abbreviation:</h4>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">State: </span>
  <input type="search" id="stateSearch" class="form-control" placeholder="NY">
<h4 for="nameSearch">Search by representative name:</h4>
</div>
<h4 for="nameSearch">Search by representative name:</h4>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">Name: </span>
  <input type="search" id="nameSearch" class="form-control" placeholder="Maria">
</div>

...

<script type="text/javascript">
  var jets = new Jets({ // searches column 2, containing state codes
  searchTag: '#stateSearch',
  contentTag: '#jetsContent',
  columns: [2]
});

  var jets2 = new Jets({ // expected: search col 1, containing names
  searchTag: '#nameSearch', // actual: searches col 2, same config as above.
  contentTag: '#jetsContent',
  columns: [1]
});
</script>

Hey, loving this plugin but would love the ability to be able to write custom functions that I tell jets to execute on the following events:

• finished search
• search found no matches

var plateFilter = new Jets({
            callSearchManually: true,
            contentTag: '.plates',
            hideBy: 'opacity: 0; height: 0; width: 0; padding: 0; margin: 0; display: none;',
            manualContentHandling: function(filterTag) {
                // console.log(tag.querySelector('.plate-title').textContent);
                
                console.log('filtering by attribute...');
                console.log(filterTag.getAttribute('data-categories'));
                return filterTag.getAttribute('data-categories');
            }
        });

        $('.plateGallery-filter label').on('click', function() {
            console.log('filtering...');
            var FILTER_INPUT = $(this).find('input');

            if ( FILTER_INPUT.prop('checked') ) {
                var FILTER_CATEGORY = FILTER_INPUT.attr('data-category');

                console.log('filtering for: ' + FILTER_CATEGORY);
                plateFilter.search(FILTER_CATEGORY);
            } else {
                plateFilter.search('');
            }
        });

the "console.log('filtering by attribute...');" doesnt run in the manualContentHandling method.

I couldnt find any documentation on using both, only separately.

use case

I use the data-jets attribute for other things aswell, which means I cannot force it to lowercase.
having multiple data- attributes (one for Jets and one for others) is very expensive in a large dataset

Hey,

I was wondering if there's any chance to use this to search multilevel UL and OL, while showing the full path of the search result. Couldn't see anything referencing this use case in the documentation.

For example a list like:

1. Lorem ipsum
2. Dolor sit Amet
   1. Curabitur eu dui eu
   2. Hendrerit egestas
      1. Donec dapibus
   3. Donec ultrices
3. Consectetur adipiscing elit

Searching this list for dapibus would then show:

2. Dolor sit Amet
   ii. Hendrerit egestas
   a. Donec dapibus

Thanks in advance!

Hi,

I'm using display:none to add some text that should be searchable throught jetJS, but not visible.

On Firefox, this works just fine, but on Chrome/Safari the content of the elements never gets added to the data-jets="" attribute.

Changing the element to position:absoluteand moving it off the viewport works. I guess something in the jetJS engine keeps the content from being picked up when the element is hidden.

Is there any way to make jetJS pick up the content of hidden elements as well?

Just sharing a custom feature: I needed more searches for the same element. So I decided to add a attrName with custom name for each instance.

Firstly thanks for all your work on this!

I'm not sure if this is to do with my implementation but a large portion of my IE9 visitors are seeing this error in response to the use of Element.prototype.

The only details I have from the error are window.onerror 'Element' is undefined and a line number which points me to the minified Jets file.

I only know about the error due to my Bugsnag reports but can't actually replicate it myself via BrowserStack.

So I'm wondering, has anyone else come across this?

Wanted to use this library but it violates CSP (Content security policy) because it injects and dynamically manipulates the Style Block.

jets.min.js:9 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src. Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

Because changing the style block would recalculate the hash, it's obviously not feasible to make the hash part of the exception for CSP.

Hey Denis,

jets.js seems like a really really handy filter tool for big lists - one thing we've come quite accustomed to from both the OS X finder and Windows Explorer.

You wouldn't be able to implement the "matches any" filter - so that searching for searching for "Bar Wil" would still match "Barry Williamson" by taking the search phrase as independend key words instead of an entire phrase that must be machted?

This should be the CSS rule for that (if I'm right):
https://css-tricks.com/almanac/selectors/m/matches/

See: https://www.dropbox.com/s/t9ixkqxihl32ycn/2016-07-28_14-46-13.mp4?dl=0

if the table is generate by innerHTML,jets.jsshould be called after a few seconds like this:

$.get('./maxread3.json',function(result){
    console.log(result.length);
    var body='';
    for(var i=0;i<3000;i++){
        var item=result[i];
        body+=`<tr><td>${item.user}</td><td><a  href="${item.maxReadUrl}">${item.article}</a></td><td>${item.maxReadNo}</td></tr>`;
    }
    $('tbody').html(body);

});
setTimeout(function(){
var jets = new Jets({
  searchTag: '#search',
  contentTag: '#jetsContent',
  columns: [1]
});
},5000)