JQuery 自動完成過濾器從行首搜索 - 輸入顯示標簽但提交值

Question

我有一系列城鎮 - 每個城鎮都有一個標簽和一個值。 然后是一個 HTML 輸入，它應該顯示選擇的城鎮標簽並在提交時發送相關值。 一個帶有過濾器的 JQuery 腳本，它根據標簽的開始字符而不是標簽正文其余部分的字符來選擇城鎮。 我需要腳本到，過濾如設計，但選擇了一個城鎮時，HTML ID #dtags必須顯示標簽，#dtag必須通過隱藏的輸入提交值。 我有兩個腳本，每個腳本都成功地完成了上述之一，但我正在努力讓一個腳本結合這兩個“功能”。 我正在尋找一些幫助來創建單個 JQuery 腳本來實現上述目標。 我的 JQuery 技能有限，下面的代碼是我通過搜索和改編設法找到的 - 歸功於發起者。 請參閱以下代碼：-

<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

如果這可以幫助將來的任何人，這是我設法根據問題成功運行的腳本 - 使用外部數據源的細微變化： -

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