如何将 Jquery Autocomplete 设置为特定值并使用 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);

结果：

未捕获的错误：无法在自动完成之前调用方法 初始化;试图调用方法'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);

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

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

想法

想法 1：

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

$(searchboxid).val(label);

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

想法 2：

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

$(searchboxid).val(label);

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

Answer 1

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

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

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

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

Answer 2

使用

将值分配给自动完成输入元素

$('#YourAutoCompletBox').val(yourValuefromHiddenControl);

html:

Topic: <input type="text" id="topics" /><input type="hidden" id="topicID" />

<br/><br/><br/><br/>

<p>You selected <span id="results"></span></p>

jQuery:

var topics= [
    {
        value: "cooking",
        label: "Cooking",
        id: "1"
    },
    {
        value: "C++",
        label: "C++",
        id: "2"
    },
    {
        value: "craftsmanship",
        label: "Software Craftsmanship",
        id: "3"
    }
];

$(document).ready(function() {
    $( "#topics" ).autocomplete({
        minLength: 0,
        source: topics,
        focus: function( event, ui ) {
            $( "#topics" ).val( ui.item.label );
            return false;
        },
        select: function( event, ui ) {
            $( "#topics" ).val( ui.item.label );
            $("#topicID").val(ui.item.id);
            $( "#results").text($("#topicID").val());    
            return false;
    }
})

});

游乐场：jsfiddle