使用 AJAX 和 JQuery 从 JSON 文件中进行多选和捕获信息的问题

Question

我有一个实时搜索功能，可以使用 AJAX 和 jQuery 解析来自 JSON 文件的信息，然后可以点击。我正在努力弄清楚的是如何让值（在本例中为 "happy" 或 "fat"）填充多选，然后一旦完成，捕获其余数据 JSON数组待会用到。

 $(document).ready(function(){
 $.ajaxSetup({ cache: false });
 $('#search').keyup(function(){
  $('#result').html('');
  $('#state').val('');
  var searchField = $('#search').val();
  var expression = new RegExp(searchField, "i");
  $.getJSON('coretype.json', function(data) {
   $.each(data, function(key, value){
    if (value.identifier.search(expression) != -1)
    {
     $('#result').append('<li class="list-group-item link-class"> '+value.identifier+'</li>');
    }
   });   
  });
 });

$('#result').on('click', 'li', function() {
  var click_text = $(this).text().split('|');
  $('#search').val($.trim(click_text[0]));
  $("#result").html('');
 });
});

我已经一路走到了让值可以点击的地步，但从那里弄清楚其余部分一直没有成功。

这是 JSON 文件：

 [
      {
        "identifier":"Happy",
        "progressbar1": 3,
        "progressbar2": 2,
        "progressbar3": -2
      },
        {
        "identifier":"Fat",
        "progressbar1": -3,
        "progressbar2": -2,
        "progressbar3": 2
      }
    ]

理想情况下，我希望 javascript 能够在有人输入标识符时捕获 "progressbarX" 值，尽管我认为有一种更简单的方法可以实现这一点...

<!-- Search -->
  <br /><br />
  <div class="container" style="width:900px;">
   <h2 align="center">EnneaTest</h2>
   <br /><br />
   <div align="center">
    <input type="text" name="search" id="search" placeholder="trait type" class="form-control" />
   </div>
   <ul class="list-group" id="result"></ul>
   <br />
  </div>
  </div>
</div>

这是Plunker file

Answer 1

我创建了一种用于从 json 搜索的自动完成下拉列表。一旦从该下拉列表中选择了一个选项，我就会将其添加到结果列表中。那时整个对象被推入 searchObjects 对象。单击列表中的项目时，该文本用于搜索与其关联的对象。希望这有帮助..

           <!-- Search -->
    <br /><br />
    <div class="container" style="width:900px;">
     <h2 align="center">EnneaTest</h2>
     <br /><br />
     <div align="center">
      <input type="text" name="search" id="search" placeholder="trait type" class="form-control" />
     </div>
     <div id="searchResult"></div>
     <div>
         <ul class="list" id="result" style="color: red;"></ul>
     </div>

     <br />
    </div>



       <script>

        $(document).ready(function(){
        $.ajaxSetup({ cache: false });


        $('#search').keyup(function(){
                    var searchField = $('#search').val();
                    var regex = new RegExp(searchField, "i");
                    var output = '<div class="row">';

                    $.getJSON('coretype.json', function(data) {
                      $.each(data, function(key, val){
                        if (val.identifier.search(regex) !== -1)  {
                            console.log(val);
                            var thisVal = JSON.stringify(val);
                          output += "<h5 onclick='addToList("+thisVal+")'>" + val.identifier + "</h5>";
                        }
                      });
                      output += '</div>';
                      $('#searchResult').html(output);
                    }); 
        });





        $('#result').on('click', 'li', function() {
          var click_text = $(this).text();
          console.log(click_text);
          var thisObj = [];
          thisObj = findObject(click_text);
          console.log(thisObj);
         });
       });

       var searchObjs = [];


        function addToList(obj) {
            //console.log(obj);
            $('#result').append('<li class="list-group-item link-class">'+obj.identifier+'</li>');
            $('#searchResult').html('');


            var item = {};
            item ["identifier"] = obj.identifier;
            item ["progressbar1"] = obj.progressbar1;
            item ["progressbar2"] = obj.progressbar2;
            item ["progressbar3"] = obj.progressbar3;

            searchObjs.push(item);

            console.log(searchObjs);

        }  

        function findObject(identifier) {
            var found = 0;
            for (var i = 0, len = searchObjs.length; i < len; i++) {
                if (searchObjs[i].identifier === identifier) {
                    return searchObjs[i]; // Return as soon as the object is found
                    found = 1;
                }
            }
            if(found === 0) {
                return null; // The object was not found    
            }

        } ;           

        </script>

使用 AJAX 和 JQuery 从 JSON 文件中进行多选和捕获信息的问题

Issues with using AJAX and JQuery to multiselect and capture information from JSON file

javascript

ajax

jquery

json

multi-select