Question

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

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

我使用以下jquery代码来操作自动完成并恢复数据。然后在一次单击时我想用返回的数据填充两个输入。一切都有效，除了实际的字段，自动完成功能不会被填满。

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>

Answer 1

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

data( "ui-autocomplete" )._renderItem

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

我认为它无效的原因是你将无效的东西传递给自动完成：

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

但是你要传递自定义数据。要做到这一点（不干涉自动完成自己的功能），你应该使用一个函数数据源：

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停止自动完成尝试设置字段本身的值（并失败，因为它不知道设置字段的内容到）。

我知道的原因是我想在我的应用程序中自动完成以自动提交所选值，就好像用户在选择值后按Enter键一样。这样做的方法是：

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;
},

jQuery自动完成除了填充自己的字段外，还可以完成所有操作

1 个答案: