1

我有一个带有自动完成功能的简单文本输入：

<input type="text" class="span4" id="autoc1" name="agent" value="">

我正在使用以下 jquery 代码来执行自动完成并带回数据。然后单击一下，我想用返回的数据填充两个输入。除了没有填充自动完成的实际字段之外，一切都按原样工作。

查询：

$(function() {
    // input id of field with autoc on        
    $( "#autoc1" ).autocomplete({

        // php mysql data get
        source: "/pages/includes/getAgent.php",            
        minLength: 2,

        select: function( event, ui ) {
            //alert(ui.item.agent_name); //  shows correct info, here only to test

            //tried $(this) as below - didn't work
            //$(this).val(ui.item.agent_name);

              $('#autoc1').val(ui.item.agent_name); //  tried with and without this, didn't work
              $('#comm').val(ui.item.commission_percent); // this works perfectly!!
        }
    }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li>" )
        .append( "<a>" + item.agent_name + "</a>" )
        .click(function(){$('#autoc1').val(item.agent_name)}) // added this. didn't work
        .appendTo( ul );
    };
});

如果有帮助，这是返回的 JSON：

[{"0":"agent a","agent_name":"agent a","1":"15","commission_percent":"15"},
{"0":"agent b","agent_name":"agent b","1":"10","commission_percent":"10"}]

完全没有想法！

编辑

更多html，基本形式，简单

<form class="add_booking" method="post">

    <input type="text" placeholder="Date" class="span2" id="datepicker" name="date" value="<?=$showDate?>">

    <input type="text" placeholder="Booking Agent" class="span4 here" id="autoc1" name="agent" value="<?=$ds['agent']?>">

    <input type="text" placeholder="15" class="span1" name="commission" id="comm" value="<?=$ds['show_comm_percent']?>">%

etc etc </form>
4

1 回答 1

1

在您正在执行的代码部分中：

data( "ui-autocomplete" )._renderItem

您正在搞乱 jQuery 自动完成的内部数据和功能。你不应该那样做。

我认为它不起作用的原因是您将无效的东西传递给自动完成：

支持的格式有两种： 字符串数组：[ "Choice1", "Choice2" ] 具有标签和值属性的对象数组：[ { label: "Choice1", value: "value1" }, ... ]

但是您正在传递自定义数据。为此（不干预 Autocomplete 自己的函数），您应该使用函数数据源：

Function: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete. The callback gets two arguments:
A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".
A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

给出的例子是：

$( "#autocomplete" ).autocomplete({
  source: function( request, response ) {
          var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
          response( $.grep( tags, function( item ){
              return matcher.test( item );
          }) );
      }
});

当您从服务器获取数据时，您需要在对服务器进行 ajax 调用时存储响应函数，并在返回数据时调用它。

但是，如果您想在使用自定义数据格式并覆盖内部函数时继续使用您的版本，为了使其工作，您可以添加return false到 select 函数。

select: function( event, ui ) {
    $('#autoc1').val(ui.item.agent_name); //  tried with and without this, didn't work
    $('#comm').val(ui.item.commission_percent); // this works perfectly!!
    return false;
}

这样做的原因是您现在正在手动设置字段的值，并且返回 false 会阻止自动完成尝试设置字段本身的值（并且由于不知道将字段设置为什么而失败）。

我知道的原因是我希望我的应用程序中的自动完成功能能够自动提交选定的值，就像用户在选择值后按下回车一样。这样做的方法是：

autocompleteSelect: function(event, suggestItems){
    var suggestItem = suggestItems.item;
    $(this.element).find('.tagInput').val(suggestItem.value);
    $(this.element).find('.tagInput').blur(); //This triggers the onchange function elsewhere
    $(this.element).find('.tagInput').val("");
    event.stopPropagation();
    return false;
},
于 2013-03-29T20:17:26.213 回答