php - 如何将 Jquery 自动完成设置为特定值并使用 JSON 对象的数据源显示它的标签

Question

背景

所以我有一个由表单填充的表。可以通过点击编辑按钮来编辑每一行。编辑按钮打开填充的表单。我需要自动填充自动完成，以便用户可以看到他选择的类(class)之一。

我是如何作弊的

我正在使用 PHP 和 Codeigniter 服务器端，并基于数据库动态创建我的表单。标签和值都是从数据库中生成的，并填充我的 JQuery 自动完成(也就是下面的数据源变量)。从我的 Controller 中，我将我的值传递给模型并从数据库中获取标签。从那里我将它传递到我的 View 和我的自动完成并将输入值设置为等于找到的标签。

我觉得这样做很脏。这样做的低效率让我眼花缭乱。

我的目标

我想使用我得到的值并让自动完成选择它并在客户端显示它的标签。

或

我只需要在框中显示标签，以便用户知道它不是空白字段。

这两个选项都需要允许用户修改自动完成框。

现有代码

我的输入代码如下所示:

<div class="row-start span-2">
        <label for="course_code">Course Code </label>
    </div>
    <div class="row-end span-2">
        <input id="course_code">
    </div>

我的自动完成脚本如下所示:

    <script>
    function search_course_code(){
      var datasource = [{"value":"1","label":"AAF100 - DL"},{"value":"2","label":"AAF101 - DL+web"},.....]; 
      var searchboxid = "#course_code";
      var searchresultid = "#CRSEINVID";
      $(searchboxid).autocomplete({
        source:datasource,
        focus: function( event, ui ) {
            $( searchboxid ).val( ui.item.label );
            return false;
            },
        select: function(event,ui){
            var UIvalue = ui.item.value;
            var UIlabel = ui.item.label;
            console.log(UIvalue);
            console.log(UIlabel);
            $( searchboxid ).val( ui.item.label );
            use_search("#search1","#CRSEINVID",UIvalue,UIlabel );        return false;
        }
      });
    }; 
    function use_search(show_select,result_id,uivalue,uilabel){
    //loads value to field that takes it's value
    $(result_id).val(uivalue);
    //Display course below search box
    course = "<span>"+uilabel+"</span>";
    $(show_select).html(course );

    //stops the value from being shown in the search box
    return false;
  };

    $( document ).ready(function() {
         search_course_code();
    });
    </script>

我仅使用 JQUERY val() 函数从具有唯一 ID 的隐藏输入中提取值。

我尝试过的

尝试1

设置值使用: $(searchboxid).val(hiddenInputValue); 结果:显示的值不是标签

尝试2

在创建方法上使用自动完成我试图覆盖 UI 对象并将其发送到选择。

ui.item={"value":"","label":""};
ui.item.value=$(hiddenInputValue).val;
this.select(ui);

结果:没有可观察到的变化，没有错误。

尝试3

$(searchboxid).autocomplete("select", hiddenInputValue);

结果:

Uncaught Error: cannot call methods on autocomplete prior to initialization; attempted to call method 'select'

尝试4

尝试使用

更改值

$(searchboxid).val(hiddenInputValue);

并具有更改功能检测它并设置标签

$( searchboxid ).val( ui.item.label );

结果:值加载到输入而不是标签

尝试5

尝试用这个触发更改功能:

$("#<?php echo $id;?>").autocomplete("option","change").call(searchBox);

然后设置标签。基于对以下内容的回答:

jQuery AutoComplete Trigger Change Event

结果:更改功能的空 UI 对象，

尝试6

尝试用这个触发选择函数:

$("#<?php echo $id;?>").autocomplete("option","select",{value:hiddenInputValue}).call(searchBox);

然后使用我当前的选择功能。

结果:未捕获错误:undefined 不是函数，

想法

想法 1:

我想到了使用该值然后搜索数据源对象以找到关联标签然后使用:

$(searchboxid).val(label);

这行得通吗？我该怎么做？

想法 2:

如果输入字段的值设置为使用以下值:

$(searchboxid).val(label);

change函数会检测到吗？未检测到在change函数中使用console.log函数反馈，

Answer 1

所以经过大量研究并试图让它发挥作用后，我发现了两个问题:

1. 我使用的是 Select2 版本 3.5.3，需要使用 text 而不是 label 并且:

$myselect.select2("val","somevalue");

1. 我的问题的主要根源是因为我使用的是 Web Experience Toolkit 选项卡，我需要在选项卡初始化后加载 Select 2。