如何将部分 Json 数据加载到多选下拉列表中

Question

我使用jQuery Tokenize API 来实现多选下拉。使用 java 脚本我自定义了 <option> 标记，就像一个模板。创建的多选下拉列表如下图所示。我的要求是我有一个它充当过滤器的文本框。当我将搜索文本输入为 java 时，我的下拉菜单应该只加载项目language=Java。请让我知道是否可以在前端执行此操作，或者我应该填充与后端的搜索文本匹配的数据。这个问题不是重复的，因为在我当前的实现中，我可以搜索项目，但使用<option> val 和 text.but 在我的要求中，我将option 修改为模板并将其与 drop 绑定下来。所以我想从模板中搜索文本。如果模板中的文本整个项目模板应该在下拉列表中可见。

选项标签中的一项

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

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"
      }
   ]
}

Answer 1

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

是的，可以使用 javascript。您需要循环选择选项并过滤它们。

您可以从此答案How to dynamic filter options of <select > with jQuery?查看演示

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