JSFiddle - React, Tailwind, and code Playground

by mahesh1393

HTML

<html>
<body>
                                 <input  id="JSONName" name="JSONName" size="30" class="ui-autocomplete-input" autocomplete="on" type="text" >
                                 <input  id="JSONID" name="JSONID" size="30" class="ui-autocomplete-input" autocomplete="on" type="hidden" >

JavaScript

var NameIDJsonString = {"Name1":"ID1","Name2":"ID2"};
console.log(NameIDJsonString);

$(function () {
                $('#JSONName').autocomplete({
                        source: function (request, response) {
                            response($.map(NameIDJsonString, function (value, key) {
                                return {
                                    label: key,
                                    value: value
                                };
                            }));
                        },
                        select: function (event, ui) {
                            $("#JSONName").val(ui.item.text); // display the selected text
                            $("#JSONID").val(ui.item.value); // save selected id to hidden input
                        }
                    });
                });