dynamically added content is not searchable

[laki88]

[arnauqc]

I need this feature. There's any way to achive it even if not yet developed?

[blaedj]

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!

[blaedj]

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.

[jehadja]

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

[blaedj]

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.

[stidges]

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!

[dagger2014]

Thank you so much. I struggled quite a while before noticing this post. I was attempting to "reinit" my list div using $('#mylist').searchable(....) after dynamically creating the list items. It never worked. After I change my code to $('#mylist ul').searchable(....) it suddenly worked.

Magic!

[peterpociask]

Was this ever resolved?

[Diabz]

Any working solution please ?