Question

我正在将网站从旧的jQuery-mobile框架更新为Materialize，并且正在尝试使此自动完成功能正常工作，但我似乎无法弄清楚。该网站创建于7年前，从那以后几乎没有进行过更新，因此这并不是一件容易的事

我有一个很大的javascript值/标签对，可以使用php从服务器中将其插入并按如下格式设置，这在我的页面源代码中也可以看到，所以我知道我有数据：

var equipment = [{value:"x10B1",label:" x10B1 Company Bobcat"}, 
      {value:"08003",label:"08003 John Doe"}];

仅当我添加旧的jQuery_mobile.js文件（尝试将其从以下位置移开）时，我才能使用旧的自动完成功能：

 $(document).on("pagecreate", function () {
     var equip2_<?php echo $_FMS_LOOP_COUNT; ?>_list = $("<ul id='equip2_<?php echo $_FMS_LOOP_COUNT; ?>_for' class='autocomplete-list'><li class='equip2_<?php echo $_FMS_LOOP_COUNT; ?>_close-btn'><a href='#' class='equip2_<?php echo $_FMS_LOOP_COUNT; ?>_autocomplete-btn'>  </a></li></ul>"),
     items = [];


     $(".equip2_<?php echo $_FMS_LOOP_COUNT; ?>_class:eq(0)").parent().after(equip2_<?php echo $_FMS_LOOP_COUNT; ?>_list);
     equipment.forEach(function (obj) {
         items.push("<li><a href='' class='equip2_<?php echo $_FMS_LOOP_COUNT; ?>_autocomplete-btn'>" + obj.label + "</a></li>");
     });

     equip2_<?php echo $_FMS_LOOP_COUNT; ?>_list.append(items.join(" ")).listview().on("click", "li, .equip2_<?php echo $_FMS_LOOP_COUNT; ?>_close-btn", function () {
         $("#equp_c1_<?php echo $_FMS_LOOP_COUNT; ?>").val($("a", this).text());
         $("#equp_c2_<?php echo $_FMS_LOOP_COUNT; ?>").val($("a", this).text().split(" ")[0]);
         $(this).siblings().addBack().addClass("ui-screen-hidden");
     }).children().addClass("ui-screen-hidden");

         $(".equip2_<?php echo $_FMS_LOOP_COUNT; ?>_class").on("input", function () {
         if (this.value !== "") {
             $(".equip2_<?php echo $_FMS_LOOP_COUNT; ?>_close-btn").removeClass("ui-screen-hidden");
                 var text = this.value.toLowerCase().split(" ");
                 $("#equip2_<?php echo $_FMS_LOOP_COUNT; ?>_for li").not(".equip2_<?php echo $_FMS_LOOP_COUNT; ?>_close-btn").addClass("ui-screen-hidden")
                     .filter(function () {
                        var self = $(this);
                        var match = false;

                        text.forEach(function (str) {
                            if (str === "") {
                                return;

                        }


                match=self.find("a").text().toLowerCase().indexOf(str) > -1; 
                return !match;
             });
             return match;
         }).removeClass("ui-screen-hidden");
         } else {
             $("#equip2_<?php echo $_FMS_LOOP_COUNT; ?>_for li:not('equip2_<?php echo $_FMS_LOOP_COUNT; ?>_close-btn')").addClass("ui-screen-hidden");
                                            }
     }).on("focus", function () {
         this.select();
     }).on("focus", function () {

     $("#equip2_<?php echo $_FMS_LOOP_COUNT; ?>_for").css({
                                                "top": 
      $(this).parent().offset().top + $(this).parent().height(),
                                                "left": 
      $(this).parent().offset().left,
          });
     });
});

我很高兴有它的这个工作版本，但是如果有人能为我指出正确的方向，以使用我的数据创建自动完成功能，将非常有帮助！

我目前尝试但无法正常工作的html和javascript如下：

<div class="transaction-entry-input">

<input
    type="text"
    class="equip2_<?php echo $_FMS_LOOP_COUNT; ?>_class autocomplete"
    name="equp_c1_"
    id="equp_c1_<?php echo $_FMS_LOOP_COUNT; ?> autocomplete_input"
/>
<label for="autocomplete-input">Autocomplete</label>

<input
    type="hidden"
    name="<?php echo fmsPortalNewFieldName('timesheet_transactions', 'timesheet_transactions::g elp code'); ?>"
    id="equp_c2_<?php echo $_FMS_LOOP_COUNT; ?>"
/>
                                <!--=============================== hidden input for formatting data to next page ===============================-->

    <script>
    /* Equipment Numbers */
    $(function () {
    $("#tags").autocomplete({
        source: equipment,
        focus: function (event, ui) {
        event.preventDefault();

    $("#autocomplete_input").val(ui.item.label);
},
select: function (event, ui) {
    event.preventDefault();

    $("#autocomplete_input").val(ui.item.value);

    $("#tags").val(ui.item.label);
        }
    });
});
</script>

</div>

JS /材料自动完成列表未显示

0 个答案: