Jquery ui - 自动完成 - 在保持相同帖子值的同时更改字段标签答案

【问题标题】：Jquery ui - Autocomplete - Change Label of Field while keeping the same post valueJquery ui - 自动完成 - 在保持相同帖子值的同时更改字段标签
【发布时间】：2012-03-06 10:47:20
【问题描述】：

我正在处理这个 jquery 数据输入表单，我需要一个特定的字段来自动完成来自 mysql 的数据

我一切正常，自动完成通过 php 匹配从 sql 中检索数据非常适合英语/拉丁语和 utf8 字符

值从 sql 中检索为 "'number' => 'name'"

现在自动完成在输出中有 3 个值，值、标签和 id。作为 id 和 value，它使用“名称” 并且标签是我的sql字符串的“数字”（提交表单时发布到下一页）

所以一切正常，我的“号码”已正确发布，但有一点小烦恼

当我从自动完成列表中选择某些内容时，该字段将填充“数字” 有什么办法可以用“名称”填充它吗？即：搜索“名称”，获取带有“名称”的下拉列表，单击并获取字段中的“名称”，当我提交时，我会发布“编号”？

任何帮助将不胜感激。

如果您需要查看我的代码，它发布在上一个问题上：Jquery ui - Autocomplete - UTF8 charset

提前感谢:)

【问题讨论】：

标签： jquery-ui post autocomplete label jquery-ui-autocomplete

【解决方案1】：

通常的做法是：

使用隐藏的input 保存您要发布的值，然后自动完成一个单独的字段。
在select 上填充隐藏的input
使用所选项目的label 属性填充可见、自动完成的input。

所以，例如：

HTML：

<input type="hidden" name="name" />
<input type="text" id="name_auto" />

JavaScript：

$(function () {
    var cache = {},
        lastXhr;
    $( ".name" ).autocomplete({
        minLength: 1,
        source: function( request, response ) {
            var term = request.term;
            if ( term in cache ) {
                response( cache[ term ] );
                return;
            }

            lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) {
                cache[ term ] = data;
                if ( xhr === lastXhr ) {
                    response( data );
                }
            });
        },
        select: function (event, ui) {
            event.preventDefault();
            this.value = ui.item.label;
        },
        change: function (event, ui) {
            if (ui.item) { 
                $("input[name='name']").val(ui.item.value);
            } else {
                $("input[name='name']").val('');
            }
        }
    });
});

【讨论】：

明天会看一下并告诉你我能处理什么:)thanx 的回复
“event.preventDefault();”线是我需要的。我在 jQuery UI 自动完成文档中没有看到这一点。谢谢。

【解决方案2】：

您可以使用自动完成的结果（处理程序）其中变量数据，如数组，你可以一次返回两个数据解释：在 JavaScript 中

$().ready(function()
{
var url = "<?=base_url()?>index.php/master/agen";
var width_val = 308;
$("#name_auto").autocomplete(url,
{
    width: width_val,
    selectFirst: false,
 });

 $("name_auto").result(function(event, data, format)
 {
         $("#name_auto").val(data[0]);
         $("#id").val(data[1]);
 });
});

在 HTML 中：

<input type="hidden" name="number" id="id" />
<input type="text" id="name_auto" name="name" />

在 PHP 中：

foreach ($source->result() as $row)
{
echo "$row->nama|$row->id\n";
}

注意：这里我使用 PHP CodeIgniter

【讨论】：