nexts / jets.js Goto Github PK
View Code? Open in Web Editor NEWNative CSS search engine
Home Page: https://jets.js.org
License: MIT License
Native CSS search engine
Home Page: https://jets.js.org
License: MIT License
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.
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.
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
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!
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:
Searching this list for dapibus would then show:
Thanks in advance!
Сделай пожалуйста работу с несколькими списками, например несколько UL элементов по которым надо делать поиск.
Я конечно сделал кастыль:
_getContentTags: function(query) {
return Array.prototype.slice.call(document.querySelectorAll(this.content_param + '> *'));
},
It would be much nicer. At least for debug purposes.
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/
if the table is generate by innerHTML
,jets.js
should 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)
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
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.
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
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.
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?
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.
display
is not animatable. so some use height: 0
or transform: scale(0)
or opacity: 0
, or a combination of those, combined with transition
Есть ли возможность доработать поиск по всем диакритическим знакам? Для русского это удобно, когда в поиске вводишь е и при необходимости ищет и по ё. Или может необязательной опцией сделать хотя бы
Нашёл пример набора символов в другой библиотеке
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ŽžżŻźŹ]'
};
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 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...
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:absolute
and 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?
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.
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]);
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?
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:
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.
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.
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 input
tag is working fine but Is it possible in Select
tag or some other way.
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.
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.