Comments (9)
I had a similar issue - the dynamic content that I wanted to be searchable was always inside a div#searchable
. When the user performed certain actions, the content would change (via ajax) and when the content had been successfully inserted into the page, I would call $('#searchable').searchable(...)
again. However, the searching didn't work after calling $('#searchable').searchable(...)
the second time.
I eventually go this to work: although div#searchable
was never added/removed from the DOM, the dynamic content was always wrapped by a div.dynamic-content
element, which was added and removed from the DOM. By scoping my searchable
call to that element, I was able to get the searchable to work as expected.
Before (doesn't work)
<script>
$(document).on('ready', function(){
makeSearchable()
})
$('.some-button').on('click', function(){
reactToUserAction()
})
function reactToUserAction(){
// .....
// code to load dynamic content from server when user
// performs some action....
// ....
makeSearchable()
}
// doesn't work when called a second time for new content...
function makeSearchable(){
$('#searchable').searchable({selector: 'div.person', childSelector: '.name',
searchField: '#search-box'})
}
</script>
<input type="text" id="search-box" />
<div id="searchable"> <!-- wrapper element around all the dynamic content
that is never added/removed from DOM -->
<div class="dynamic-content"> <!-- this element is added/removed and contains
all the dynamic content -->
<div class="person">
<span class="name">Frank</span>
</div>
<div class="person">
<span class="name">Sally</span>
</div>
</div>
</div>
After (works)
<script>
$(document).on('ready', function(){
makeSearchable()
})
$('.some-button').on('click', function(){
reactToUserAction()
})
function reactToUserAction(){
// .....
// code to load dynamic content from server when user
// performs some action....
// ....
makeSearchable()
}
// makes the dynamic content searchable whenever it is called
function makeSearchable(){
// Note the more specific jQuery matcher: here we select the element that
// is actually changing.
$('#searchable .dynamic-content').searchable({selector: 'div.person', childSelector: '.name',
searchField: '#search-box'})
}
</script>
<input type="text" id="search-box" />
<div id="searchable"> <!-- wrapper element around all the dynamic content
that is never added/removed from DOM -->
<div class="dynamic-content"> <!-- this element is added/removed and contains
all the dynamic content -->
<div class="person">
<span class="name">Frank</span>
</div>
<div class="person">
<span class="name">Sally</span>
</div>
</div>
</div>
I hope this helps someone else!
from jquery-searchable.
I need this feature. There's any way to achive it even if not yet developed?
from jquery-searchable.
After some debugging, it appears that this happens because the init function is only called once per element, regardless of how many times you call $('#element').searchable()
on a given element. (I think this is because of lines #184-#185 in jquery-searchable.js? it seems that this code ensures an instance of the searchable plugin is only created once for a given element.)
The important thing here is that this.$searchElems
is only set the first time you call $('#element').searchable()
on a particular element, so the set of elements that is being searched never changes. This means that the dynamically added elements are not included in the set to be searched.
I think that my earlier suggestion will work when you are replacing all elements dynamically, but not for situations like #9. To solve that, it seems that the set of searchable elements needs to be less statically defined on initialization.
from jquery-searchable.
Thank you for trying help but i tried to use this code it wan't work
and actually i don't know in which Jquery version accept this selector
$('#searchable.dynamic-content')
for my Jquery it take it all as selector
[prevObject: n.fn.init[1], context: document, selector: "#friendslist#friends"]
if i put space between them also it don't make dynamic content searchable
hope you can help me and sorry for my English
from jquery-searchable.
Hmm, the selector $(''#searchable.dynamic-content")"
was wrong in my comment, should have been $("#searchable .dynamic-content")
. I've fixed it now, thanks for finding that.
As far as your other questions, see this gist, as I think discussion of the jquery selectors is probably out of scope for this repo. We can continue the discussion there.
from jquery-searchable.
I will introduce a way to 'reinit' the searchable elements in the next version. I will keep this issue open until I have resolved this!
from jquery-searchable.
Thank you so much. I struggled quite a while before noticing this post. I was attempting to "reinit" my list div using
Magic!
from jquery-searchable.
Was this ever resolved?
from jquery-searchable.
Any working solution please ?
from jquery-searchable.
Related Issues (17)
- method to call if user resets text outside of search input HOT 3
- How to clean the search from code? HOT 3
- Callbacks aren't called after initializing a new instance without callbacks HOT 1
- Allow defining a 'reset' function to allow for class based showing / hiding HOT 1
- Suddenly stopped working when moved to new site HOT 5
- Not search HOT 6
- Display cell of the table row but not the td line HOT 1
- Option to find accented vowals by using un-accented vowals. HOT 3
- Highlight matches HOT 1
- Not working for IE8 HOT 4
- bower doesn't install the ie version HOT 2
- oddRow/evenRow when displayed at hidden div HOT 2
- Invalid json in bower.json after "jquery.searchable-ie.js" HOT 1
- Search in menu & submenu with JQuery Searchable plugin - multilevel HOT 2
- Possible to search with multiple inputs? Or manually trigger the search? HOT 1
- Add new item to list HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jquery-searchable.