Need input in another div! #listjs

Question

Anyone in here familiar with LISTJS plugin? If so, I require your assistance.

Reffering to: http://codepen.io/javve/pen/zpuKF.

What I'm trying to achieve is NOT havin the search-input within the same div as the list.

I want the search-input in another div. Is this possible? If so, what do I do, I'm guessing I'm gonna have to edit the source code...?

To sum up - I wan't the input field in another div, not the "users" - as described below.

 <div id="THIS IS WHERE I WANT MY INPUT FIELD"></div>
 <div id="users">
 <input class="search" placeholder="Search" />
 <button class="sort" data-sort="name">
 Sort by name
 </button>

 <ul class="list">
 <li>
  <h3 class="name">Jonny Stromberg</h3>
  <p class="born">1986</p>
 </li>
 <li>
  <h3 class="name">Jonas Arnklint</h3>
  <p class="born">1985</p>
</li>
<li>
  <h3 class="name">Martina Elm</h3>
  <p class="born">1986</p>
</li>
<li>
  <h3 class="name">Gustaf Lindqvist</h3>
  <p class="born">1983</p>
</li>
</ul>

</div>
<script src="http://listjs.com/no-cdn/list.js"></script>

Answer 1

You can do it by editing the plugin, only some few lines of code to add some options to the plugin to make it accept sibling search input by id

1. First go to the init() method in the plugin to add some options and their default values, let say options.searchWithId which is a boolean that indicates if you want sible search input using an id and options.searchId which correspond to the Id of your search input:

   // If not provided in the options it takes false by default
   self.searchWithId = options.searchWithId || false;
   // In case search input with id, initialise the id
   self.searchWithId ? self.searchId = options.searchId || false : void 0;
   

2. After that you need to modify the input search object retrieval by adding those lines of code, just before the keyup event bind:

   var searchInput = null;
   if(list.searchWithId === false){
       searchInput = getByClass(list.listContainer, list.searchClass);
   }
   else{
       searchInput = $("#"+list.searchId);
   }
   

3. And finally change the events binding like this:

   events.bind(searchInput, 'keyup', function(e) {
       var target = e.target || e.srcElement, // IE have srcElement
           alreadyCleared = (target.value === "" && !list.searched);
       if (!alreadyCleared) { // If oninput already have resetted the list, do nothing
           searchMethod(target.value);
       }
   });
   
   // Used to detect click on HTML5 clear button
   events.bind(searchInput, 'input', function(e) {
       var target = e.target || e.srcElement;
       if (target.value === "") {
           searchMethod('');
       }
   });
   

4. You can initialize your plugin this way:

   var options = {
     valueNames: [ 'name', 'born' ],
     searchWithId: true,
     searchId: "search-list"
   };
   
   var userList = new List('users', options);
   

and you put your search input where you want (outside, inside, ...)

<input id="search-list" class="search" placeholder="Search" />
<div id="users">

  <button class="sort" data-sort="name">
    Sort by name
  </button>

  <ul class="list">
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
    </li>
  </ul>

</div>

I tested it and it works, if you want the entire file just let me know.

Update

Fiddle demo