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

Posted 2023-02-24

【中文标题】如何将 Jquery Autocomplete 设置为特定值并使用 JSON 对象的数据源显示它的标签

【英文标题】：How to set Jquery Autocomplete to a specific value and display It's Label using a datasource of JSON objects

【发布时间】：2014-09-15 00:35:07

【问题描述】：

背景

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

我是如何作弊的

我正在使用 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 函数来提供反馈，

【问题讨论】：

你需要你的脚本做什么很清楚，但你向我们提出的要求却不是。如果您告诉我们您已经尝试做什么来完成您的任务以及这些尝试的结果是什么，您将会得到更好的回应。例如，您已经尝试过一个答案，并且您的评论说您已经尝试过。如果您在问题中包含该信息，您可以节省每个人的时间。

感谢您的建议，希望我添加了更多帮助。

看起来好多了，但我做了一个修改：我改变了你的背景信息和你的具体要求的顺序。您的要求非常具体，因此在手头的特定任务之前描述您的整个项目更有意义。此外，很高兴您添加了尝试的解决方案，但请尝试更具体地列出您列出的第一个结果。 “一无所有”是什么意思？你有段错误吗？一个空白屏幕？它是否执行但仍然给你不正确的结果？它们长什么样子？

希望编辑回答问题。不熟悉段错误。

也许 segfault 是一个潜在错误的糟糕示例，因为您使用的是 javascript。它是Segmentation Fault 的缩写，在手动管理内存的 C/C++ 等语言中更为常见。你不应该在 JS Web 开发中经常遇到它们，尽管它仍然是可能的。我想你现在有一个更强烈的问题，如果我对 JS 有足够的了解，我会尽力为你解答。

【参考方案1】：

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

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

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

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

【参考方案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

【讨论】：

请查看我的更新帖子，希望对您有帮助，如果对您有用，请标记为答案

这就是我现在所拥有的。我现在需要做的基本上是获取 中的值并将其传递到输入中，然后显示标签而不是输入。

你必须使用 $( "#topics" ).val( ui.item.label ); $("#topicID").val(ui.item.id);要访问您的标签属性，请告诉我它是否适合您

页面加载时需要这个。所以我会使用 create 方法。当我这样做时，ui 对象为空。