时间戳

首页 > 解决方案 > JQuery自动完成过滤器从行输入开始搜索以显示标签但提交值

javascript - JQuery自动完成过滤器从行输入开始搜索以显示标签但提交值

问题描述

我有一系列城镇 - 每个城镇都有一个标签和一个值。然后是一个 HTML 输入，它应该显示所选的城镇标签，并在提交时发送相关值。一个带有过滤器的 JQuery 脚本，它根据标签的开始字符而不是标签正文的其余部分中的字符来选择城镇。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. 我有两个脚本，每个都成功地完成了上述之一，但我正在努力让一个脚本结合这两个“功能”。我正在寻找一些帮助来创建单个 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>

标签： javascripthtmljquery

解决方案

万一这可以帮助将来的任何人，这是我设法根据问题成功运行的脚本-关于使用外部数据源的细微变化：-

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

推荐阅读