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

Question

背景

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

我是如何作弊的

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

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

我的目标

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

或者

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

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

现有代码

我的输入代码如下所示：

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

结果：

未捕获的错误：无法在初始化之前调用自动完成方法；试图调用方法“选择”

尝试 4

尝试使用更改值

$(searchboxid).val(hiddenInputValue);

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

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

结果：加载到输入中的值不是标签

尝试 5

尝试使用以下方法触发更改功能：

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

然后设置标签。基于对以下问题的回答：

jQuery 自动完成触发更改事件

结果：用于更改功能的空 UI 对象，

尝试 6

尝试使用以下方法触发选择功能：

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

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

结果：未捕获错误：未定义不是函数，

想法

想法1：

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

$(searchboxid).val(label);

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

想法2：

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

$(searchboxid).val(label);

更改功能会检测到它吗？ 未检测到在更改功能中使用 console.log 功能提供反馈，

Answer 1

因此，经过大量研究并尝试使其发挥作用后，我发现了两个问题：

1. 我正在使用 Select2 版本 3.5.3 并且需要使用text而不是labeland ：

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

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