如何从JSON重新选择值

Question

我有Ajax实时搜索脚本，它有几个文本输入可以搜索产品。实时搜索功能非常有效。我有一个问题：

如果我想更改其中一个产品名称如何在页面前返回并重新选择产品？

我累了或者选择了不同的产品，但它仍然是我第一次选择的相同产品。

这是我第一次使用ajax和JSON脚本。有人可以教我吗

的index.php

<input type="text" name="search" id="search" placeholder="" class="form-control" size="3000" onkeypress="return event.keyCode!=13" />
<span class="searchclear glyphicon glyphicon-remove-circle"></span>
<ul class="list-group" id="result"></ul>

js文件

$(document).ready(function () {
    $.ajaxSetup({
        cache: false
    });
    $('#search').keyup(function () {
        $('#result').html('');
        $('#state').val('');
        var searchField = $('#search').val();
        var expression = new RegExp(searchField, "i");
        $.getJSON('js/data.json', function (data) {
            $.each(data, function (key, value) {
                if (value.name.search(expression) != -1 || value.location.search(expression) != -1) {
                    //$('#result').append('<li class="list-group-item link-class"><img src="'+value.image+'" height="40" width="40" class="img-thumbnail" /> '+value.name+' | <span class="text-muted">'+value.location+'</span></li>');

                    $('#result').append(
                        '<li class="list-group-item link-class"' +
                        ' data-name="' + value.name + '"' +
                        ' data-code="' + value.code + '"' +
                        ' data-location="' + value.location + '"' +
                        '><img src="' + value.image + '" height="40" width="40" class="img-thumbnail" /> ' + value.name + ' <span class="text-muted">' + value.location + '</span></li>');
                }
            });
        });
    });

    $('#result').on('click', 'li', function () {
        var name = $(this).data('name');
        var code = $(this).data('code');
        var location = $(this).data('location');

        var click_text = $(this).text().split('|');
        $('#search').val($.trim(click_text[0]));

        $('#search').attr('readonly', true);

        $("#result").html('');

        $('#result').after('<input type="hidden" name="name" value="' + name + '">');
        $('#result').after('<input type="hidden" name="code" value="' + code + '">');
        $('#result').after('<input type="hidden" name="location" value="' + location + '">');

这是第二个实时搜索JS文件

$('#result2').append(
'<li class="list-group-item link-class"' +
' data-name="' + value.name + '"' + 
' data-code="' + value.code + '"' +  
' data-location="' + value.location + '"' + 
'><img src="'+value.image+'" height="40" width="40" class="img-thumbnail" /> '+value.name+'  <span class="text-muted">'+value.location+'</span></li>');
}
});
});
});

$('#result2').on('click', 'li', function() {
var name = $(this).data('name' ); 
var code = $(this).data('code' ); 
var location = $(this).data('location' ); 
//alert( name2 + ', ' + code2 + ', ' + location2 ); 

var click_text = $(this).text().split('|');
$('#search2').val($.trim(click_text[0]));


$('#search2').attr('readonly',true); 


$("#result2").html('');


$('#result2').after('<input type="hidden" name="name2" value="'+name2+'">');
$('#result2').after('<input type="hidden" name="code2" value="'+code2+'">');
$('#result2').after('<input type="hidden" name="location2" value="'+location2+'">');


});
});

JSON文件

[
{ "name":"orangecar","code": "102","location":"34" },
{ "name":"applecar","code": "101","location":"12" },
{ "name":"bananacar","code": "202","location":"58" },
{ "name":"limecar","code": "201","location":"63" }
]

Answer 1

$(document).ready(async function() {
   $.ajaxSetup({
       cache: false
   });
   JSONdata = await getJson(); //JSONdata is a global variable which you can access from everywhere
});

getJson = () => new Promise((resolve, reject) => {
    $.getJSON('js/data.json', (data) => {
        resolve(data);
    }).fail(function() {
        reject([]);
    })
});

这是处理JSON调用并在JSONdata全局变量中设置数据的部分。如果它$.getJson失败它返回一个空数组...之后你可以在你的应用程序的任何地方使用JSONdata。

我还更新了小提琴，您应该检查其余代码的工作原理，JSON加载部分已完成。

LE：更新了脚本添加添加的请求功能

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

  JSONdata = await getJson(); //JSONdata is a global variable which you can access from everywhere
  generateFields(20);

});

$(document).on('keyup', '.search', function() {
  const ref = $(this).attr('data-ref');

  $(`.resultUl[data-ref="${ref}"]`).html('');
  const searchField = $(this).val();
  const expression = new RegExp(searchField, "i");

  $.each(JSONdata, (key, value) => {
    const {
      name,
      location,
      code,
      image
    } = value;
    if (name.search(expression) != -1 || location.search(expression) != -1) {
      $(`.resultUl[data-ref="${ref}"]`).append(
        `<li 
          class="list-group-item link-class"
        	data-name="${name}"
          data-code="${code}"
        	data-location="${location}"
        >
        	<img src="${image}" height="40" width="40" class="img-thumbnail" />
        	${name}
       	  <span class="text-muted">${location}</span>
         </li>`
      );
    }
  });
});

getJson = () => new Promise((resolve, reject) => {
  // Change the path below with the path for your script
  $.getJSON('https://api.myjson.com/bins/lpizs', (data) => {
    resolve(data);
  }).fail(function() {
    reject([]);
  })
});

generateFields = (fieldNumber) => {
  Array(fieldNumber).fill().map((v, i) => {
    const ref = i + 1;
    $('#container').append(
      `<div class="fieldContainer">
    <div class="btn-group">
    	<input type="text" class="search" data-ref="${ref}" placeholder="製品 その１" class="form-control" size="3000" onkeypress="return event.keyCode!=13" />
    	<span class="searchclear glyphicon glyphicon-remove-circle"></span>
  	</div>
  	<ul class="list-group resultUl" data-ref="${ref}"></ul>
    </div>`
    )
  });
}

.fieldContainer {
  margin-bottom: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">

</div>

这应该适用于您的应用