JSON string in autocomplete key and value pair

Question

I have an JSON string like {"Name1":"ID1","Name2":"ID2"} which I have retrieved using json_encode of PHP. How can I have an input field with Name1,Name2 in autocomplete options and once Name1 is selected, ID1 to be taken in a hidden field? I am using Jquery ui autocomplete.

        var NameIDJsonString = <?php echo $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
                        }
                    });
                });            
    }                       

<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" >

http://jsfiddle.net/mahesh1393/Aa5nK/4166/

Please post your JS code so that I can see what you have done till now. — Pre'P, Aug 13 '18 at 13:36
After looking at your code. It looks like you might be getting the Name1 and Name2 in autocomplete dropdown? — Pre'P, Aug 13 '18 at 13:48
Yes. It is and I wanted to get the value of ID1 in a hidden field. — Mahesh Mohan, Aug 13 '18 at 14:05

score 0 · Accepted Answer · answered Aug 14 '18 at 20:06

                var source  = [ ];
                var mapping = { };
                for(var i = 0; i < NameIDJsonString.length; ++i) {
                    source.push(NameIDJsonString[i].Name);
                    mapping[NameIDJsonString[i].Name] = NameIDJsonString[i].ID;
                }
                $('#JSONName').autocomplete({
                    minLength: 1,
                    source: source,
                    select: function(event, ui) {
                        "use strict";
                        var summary=ui.item.value;
                        $("#JSONID").val(mapping[name]);
                    },
                    change: function( event, ui ) {
                        val = $(this).val();
                        exists = $.inArray(val,source);
                        if (exists<0) {
                            $(this).val("");
                            alert("Please enter a value from the list");
                        return false;
                        }
                    }
                });

I have modified my JSON string as each object like

{Name:"Name1",ID:"ID1"}
{Name:"Name2",ID:"ID2"}

and hence the above code shall help. Thanks.:)

JSON string in autocomplete key and value pair

1 Answers1