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

Question

>我有一个实时搜索函数，它使用 AJAX 和 jQuery 解析来自 JSON 文件的信息，然后可单击。我正在努力弄清楚如何让值(在本例中为"快乐"或"胖"(填充多选，然后在完成后捕获该 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 文件

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>