jQuery UI自动完成与对象-Java 学习之路

我正在使用jQuery 1.11.2并尝试获取自动完成小部件来解析数据数组 . 我有阵中的人，Will Smith和Willem Dafoe . 当我在文本字段中输入Wi时，我希望看到两个名称都被添加到下拉列表中，但我没有得到任何响应 . 这是代码的副本：

<script src="js/jquery/jquery-1.11.2.js"></script>
<script src="js/jquery/jquery-ui.js"></script>
<link rel="stylesheet" href="js/jquery/jquery-ui.css"/>
<link rel="stylesheet" href="js/jquery/jquery-ui.theme.css"/>

<script type="text/javascript">
$(function() {
    var data = [
        {
            "id": 1,
            "first_name": "Will",
            "last_name": "Smith",
            "created_at": "2015-01-27T13:09:20.243Z",
            "updated_at": "2015-01-27T13:09:20.243Z"
        },
        {
            "id": 2,
            "first_name": "Willem",
            "last_name": "Dafoe",
            "created_at": "2015-01-27T13:17:23.479Z",
            "updated_at": "2015-01-27T13:17:23.479Z"
        }
    ];
    // Below is the name of the textfield that will be autocomplete    
    $('#search').autocomplete({
        // This shows the min length of charcters that must be typed before the autocomplete looks for a match.
        minLength: 2,
        // This is the source of the auocomplete suggestions. In this case a list of names from the people controller, in JSON format.
        source:data,
        // This updates the textfield when you move the updown the suggestions list, with your keyboard. In our case it will reflect the same value that you see in the     suggestions which is the person.given_name.
        focus: function(event, ui) {
            $('#search').val(ui.item.first_name);
            return false;
        },
        // Once a value in the drop down list is selected, do the following:
        select: function(event, ui) {
            // place the person.given_name value into the textfield called 'select_origin'...
            $('#search').val(ui.item.first_name);
            // and place the person.id into the hidden textfield called 'link_origin_id'. 
            $('#link_origin_id').val(ui.item.id);
                return false;
        }
    }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" ).data( "ui-autocomplete-item", item ).append( "<a>" + item.first_name + "</a>" ).appendTo( ul );
        // For now which just want to show the person.given_name in the list.                             
    };
});
</script>


Search: <input type="text" id="search" />

代码全部位于本地驱动器上的单个html文件夹中 . 此时不涉及服务器 . 此外，我已检查inspect元素工具是否有错误，但未显示任何错误，并且找到并加载了所有资源 .

2 回答

问题是 Autocomplete 无法呈现其运作的来源 .

您需要根据使用的JSON数据设置自动完成的来源，

source: function (request, response) {
           //data :: JSON list defined
           response($.map(data, function (value, key) {
                return {
                    label: value.first_name,
                    value: value.id
                }
            }));

    },

而且，我还从代码中删除了 .data 回调 .

在此处查看工作代码

回复于 2024-04-20T05:27:51+08:00

我已经成功地通过以下方式使其工作：

$(document).on('ready',function(){
  $(function() {
    var arrLinks = [
    {% for u in users %}
      {
        nombres: "{{ u.names }} {{u.sur_names}}",
        email: "{{ u.username }}",
        documento: {{ u.identificationNumber }},
        telefono: {{ u.phone }},
        label: '{{ u.names }} {{u.sur_names}} / {{ u.username }} * Doc: {{ u.identificationNumber }} - Cel: {{ u.phone }}'
      },
    {% endfor %}
    ];
    $("input[name=search]").autocomplete({
        source: arrLinks
    }).data("autocomplete")._renderItem = function(ul, item) {
        return $("<li>").data("item.autocomplete", item).append("<a>" + item.nombres + "</a>").appendTo(ul);
    };
  });

});

注意：我使用symfony，从控制器我发送一个带有用户的对象，在视图中（twig）我做了一个FOR，我用它为javascript对象分配了我需要的数据 . 在标签中定义要搜索的所有参数非常重要 .

Demo image!

$(document).on('ready',function(){
      $(function() {
        var arrLinks = [
          {
            nombres: "Fernando León",
            email: "efleon9@gmail.com",
            documento: 10695846754,
            telefono: 3208123307,
            label: 'Fernando León / efleon9@gmail.com * Doc: 10695846754 - Cel: 3208123307'
          },
          {
            nombres: "Edgar Molina",
            email: "fleon@fitpal.co",
            documento: 736282826,
            telefono: 30087654637,
            label: 'Edgar Molina / fleon@fitpal.co * Doc: 736282826 - Cel: 30087654637'
          }
        ];
        $("input[name=search]").autocomplete({
            source: arrLinks
        }).data("ui-autocomplete")._renderItem = function(ul, item) {
            return $("<li>").data("ui-autocomplete-item", item).append("<a>" + item.nombres + "</a>").appendTo(ul);
        };
      });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<input type="text" name="search">

回复于 2024-04-20T05:27:51+08:00

jQuery UI自动完成与对象

2 回答

在此处查看工作代码

相关问题