JSFiddle - React, Tailwind, and code Playground
JavaScript
<script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script type="text/javascript">
var $330 = $.noConflict(true);
</script>
<script type="text/javascript">
jQuery.fn.extend({
searchAndDisplay: function () {
return this.each(function () {
var searchWrapper = $(this);
$.ajaxSetup({cache: false});
searchWrapper.find('.search').keyup(function () {
searchWrapper.find('.result').html('');
// searchWrapper.find('.state').val(''); //not sure what is this, since it is not provided in sample
var searchField = searchWrapper.find('.search').val();
var expression = new RegExp(searchField, "i");
$.getJSON('http://test.jp/order/public/js/data.json', function (data) {
$.each(data, function (key, value) {
if (value.name.search(expression) != -1 || value.location.search(expression) != -1) {
searchWrapper.find('.result').append(
'<li class="list-group-item link-class"' +
' data-name="' + value.name + '"' +
' data-code="' + value.code + '"' +
' data-location="' + value.location + '"' +
' data-image="' + value.image + '"' +
'>' + value.name + '</li>');
}
});
});
});
searchWrapper.find('.result').on('click', 'li', function () {
var name = $(this).data('name');
var code = $(this).data('code');
var location = $(this).data('location');
...