0

I have used jQuery Tokenize API to implement multi select drop down.Using java script i have customized <option> tag like a template.The created multi select drop down list looks like following image.My requirement is that i have a text box it act as a filter.when i type search text as java my drop down should only load items language=Java.Please let me know is it possible to do it in front end or should i populate data that matching the search text from back end.This question is not a duplicate because in my current implementation i can search items but using <option> val and text.but in my requirement i modify option into template and bind it with drop down.So i want to search text from template.if text within template whole item template should visible in drop down.

One item in option tag

 <ul>
    <li>id:1</li>
    <li>language:Java</li>
    <li>edition:second</li>
 <ul/>

Sample Json 

{
   "book": [

      {
         "id":"01",
         "language": "Java",
         "edition": "third",
         "author": "Herbert Schildt"
      },

      {
         "id":"07",
         "language": "C++",
         "edition": "second",
         "author": "E.Balagurusamy"
      },
      {
         "id":"08",
         "language": "Java",
         "edition": "second",
         "author": "Gihan"
      }
   ]
}

enter image description here

gihan-maduranga
  • 4,381
  • 5
  • 41
  • 74
  • possible duplicate of http://stackoverflow.com/questions/1447728/how-to-dynamic-filter-options-of-select-with-jquery – llamerr Mar 31 '16 at 11:32

1 Answers1

0

Please let me know is it possible to do it in front end

Yes, it's possible to do with javascript. You need to loop through select options and filter them.

You can check demo from this answer How to dynamic filter options of <select > with jQuery?

http://www.lessanvaezi.com/wp-content/uploads/2011/07/filterByText.html

Community
  • 1
  • 1
llamerr
  • 2,997
  • 4
  • 29
  • 40
  • @gihan sorry i don't undertand what you meaning. you have already working code? `i can search items` what is the problem then? provide a fiddle with your code please – llamerr Mar 31 '16 at 12:05