JQuery autocomplete filter to search from beginning of line- input to display label but submit value

Question

I have an array of towns - each town has a label and a value. Then there is an HTML input which should display the town label selected and on submit send the relevant value. A JQuery script with a filter that chooses the town based on the beginning characters of the label and not the characters in the rest of the label body. I need the script to, filter as designed, but when a town is selected, the HTML id #dtags must display the label and the #dtag must submit the value via a hidden input. I have two scripts, each one does ONE of the above successfully, but I am battling to get one script to combine both "features". I am looking for some assistance to create a single JQuery script to achieve the above. My JQuery skills are limited and the code below is what I have managed to find through searching and adapting - credit to the originators. Please see code below:-

<div class="ui-widget">
            <input id="dtags" class="form-control col-md-8" placeholder="Choose Delivery Town" required>  
            <input id="dtag" type="hidden" name="deltown">
            </div>
<script>
      (function() {

        var towns = [
        { "label": "AANDRUS, Bloemfontein", "value": 1 },
        { "label": "AANHOU WEN, Stellenbosch", "value": 2 },
        { "label": "ABBOTSDALE, Western Cape", "value": 3 },
        { "label": "ABBOTSFORD, East London", "value": 4 },
        { "label": "ABBOTSFORD, Johannesburg", "value": 5 },
        { "label": "ABBOTSPOORT, Limpopo", "value": 6 },
        { "label": "ABERDEEN, Eastern Cape", "value": 7 },
        { "label": "ACKERVILLE, Witbank", "value": 8 },
        { "label": "ACORNHOEK, Mphumalanga", "value": 9 },
        { "label": "ACTIVIA PARK, Germiston", "value": 10 }

        ];
       
        $("#dtags").autocomplete({
            source: towns
        });
        
        // Overrides the default autocomplete filter function to search only from the beginning of the string
        $.ui.autocomplete.filter = function (array, term) {
            var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
            return $.grep(array, function (value) {
                return matcher.test(value.label || value.value || value);
            });
        };
    })();

         //Uses event.preventDefault(); to halt the default and works as below 
        // $("#dtags").autocomplete({
                //minLength: 1,
                //source: towns,
                //select: function(event, ui) {
                    //event.preventDefault();
                    //$("#dtags").val(ui.item.label);
                    //$("#dtag").val(ui.item.value);
                //}
            //});
            //});
            //});
            
            //});
 </script>

Answer 1

In case this could help anyone in the future, this is the script that I managed to get working successfully as per the question - slight change as to using an external data source:-

<script>
      (function() {
        var towns = [<?php require_once("towns.txt")?>];
       
        $("#dtags").autocomplete({
            source: towns,
            select: function( event, ui ) {
                $("#dtags").val(ui.item.label);
                $("#dtag").val(ui.item.value);
                return false;
            }
        });
        
        // Overrides the default autocomplete filter function to search only from the beginning of the string
        $.ui.autocomplete.filter = function (array, term) {
            var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
            return $.grep(array, function (value) {
                return matcher.test(value.label || value.value || value);
            });
        };
    })();
</script>