JSFiddle - React, Tailwind, and code Playground

by Rajan Paneru

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
  <div id="searchComponent-1">
    <div class="btn-group">
      <input type="text" name="search" placeholder="input 1" class="search form-control" size="3000" onkeypress="return event.keyCode!=13" />
      <span class="searchclear glyphicon glyphicon-remove-circle"></span>
    </div>

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

CSS

.container{
  padding: 20px;
}

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('https://my-json-server.typicode.com/paneru-rajan/test/posts', 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');

        var click_text = $(this).text().split('|');
        searchWrapper.find('.search').val($.trim(click_text[0]));
        searchWrapper.find('.search').attr('readonly', true);


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


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


      });

    });
  }
});

$(document).ready(function() {
  // then apply same method on...