JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

HTML

<input type='text' id='idd'/>
<div id="show"></div>

JavaScript

var array1 = ["ACAMPO,SAN JOAQUIN,039","ADELANTO,SAN BERNARDINO,036","ADIN,MODOC,025"];
var array2 = ["ACAMPO","ADELANTO","ADIN"];

  $('#idd').autocomplete({
                source: function (request, response) {
                    var matches = $.map(array1, function (element) {
                        if (element.toUpperCase().indexOf(request.term.toUpperCase()) === 0) {
    
                            return {
                                'label': element.split(',')[0],
                                'value': element.split(',')[0],
                                'data': element
                            }
                        }
                    });
                    response(matches);
                },            
                select: function (event, ui) {
                    var splitIt = ui.item.data;
                    $('#id').data('country', splitIt.split(',')[1]);
                    $('#id').data('cod', splitIt.split(',')[2]);
                   $('#show').text(splitIt.split(',')[0] +"   " + splitIt.split(',')[1] +"   " + splitIt.split(',')[2]);
                },
                change: function (event, ui) {
                    var ele = $(this).val().toUpperCase();
                    var index = jQuery.inArray(ele, array2);
                    if (index == -1) {
                        $(this).val("").focus();
                    }
                    $('#show').text("But I need similar to select " + ele);
                }
            });