Jquery UI 自动完成格式 Select

Question

如何格式化要由自动完成小部件输入到文本框的值？

代码如下：

$(function() {
    var persons = [
        {
            "salutation": "Mr."
            "name": "John Smith"
        },
        {
            "salutation": "Ms."
            "name": "Mary Doe"
        },
        {
            "salutation": "Mrs."
            "name": "Ana Smith"
        }
    ];

    $("input[name=text]").autocomplete({
        source: persons
    }).data("autocomplete")._renderItem = function(ul, item) {
        return $("<li>").data("item.autocomplete", item).append("<a>" + item.name +  "</a>").appendTo(ul);
    };
});

如何在触发 select 事件后将对象的称呼和名称属性同时添加到文本框？

谢谢

Answer 1

正如您在 official documentation here 中看到的那样，_renderItem 的 item 参数包含您的 current object 的属性，因此您可以像这样访问它们：

item.salutation 和 item.name

并将它们设置为您输入的值。

以下是官方示例中的一小部分代码：

var projects = [
    {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        icon: "jquery_32x32.png"
    },
    {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        icon: "jqueryui_32x32.png"
    }
];


$( "#project" ).autocomplete({
    source: projects,
    select: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        $( "#project-id" ).val( ui.item.value );
        $( "#project-description" ).html( ui.item.desc );
        $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
        return false;
    }
    // ...
})
// ...
.autocomplete( "instance" )._renderItem = function( ul, item ) {
    return $( "<li>" )
        .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
        .appendTo( ul );
};

更新

我已经实现了你想要的方案。请在下方查看。

$(function() {

  var persons = [{
    "salutation": "Mr.",
    "label": "John Smith"
  }, {
    "salutation": "Ms.",
    "label": "Mary Doe"
  }, {
    "salutation": "Mrs.",
    "label": "Ana Smith"
  }];

  $("input[type=text]").autocomplete({
      minLength: 0,
      source: persons,
      focus: function(event, ui) {
        $(this).val(ui.item.label);
        return false;
      },
      select: function(event, ui) {
        $(this).val(ui.item.salutation + ' ' + ui.item.label);

        return false;
      }
    })
    .data("autocomplete")._renderItem = function(ul, item) {
      return $("<li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.salutation + "<br>" + item.label + "</a>")
        .appendTo(ul);
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>



<input type="text" />

Jquery UI 自动完成格式 Select

Jquery UI Autocomplete Format Select

jquery

jquery-ui