将json从php发送到autocomplete,并在输入中添加数据属性

send json from php to autocomplete and add data attribute in input

本文关键字:输入 数据属性 添加 autocomplete json php      更新时间:2023-09-26

[{
  "sysid": "39",
  "name": "John",
  "code": "060400000"
}]

$(document).on("input", ".autocomplete", function(event) {
  var name = $(this).prop('id').split('_').pop();
  $(".autocomplete").autocomplete({
    source: function(request, response) {
      $.ajax({
        type: 'POST',
        url: 'autocomplete.php',
        dataType: "json",
        data: {
          keypressed: request.term,
          name: name
        },
        success: function(data) {
          //response(data);
          response($.map(data, function(item) {
            return {
              name: item.name,
              code: item.code,
              sysid: item.sysid
            };
          }));
        }
      });
    },
    minLength: 2
  });
})

这是我的样本数据

[{
    "sysid": "39",
    "name": "John",
    "code": "060400000"
}]

在我的自动完成中,如果我成功地使用response(data);,在php页面中使用$name[] = ucwords(strtolower($selected_row[$columnename]));,这一切都很好,但我想为我的输入文本添加额外的信息,如代码和sysid。。所以我做了

php中的$name[] = array('sysid' => $selected_row['sys_id'],'name' => ucwords(strtolower($selected_row[$columnename])),'code' => $selected_row[$columnecode]);及其在中的成功

response($.map(data, function(item) {
    return {
        name: item.name,
        code: item.code,
        sysid: item.sysid
    };
}));

我想要实现的是在完成自动完成后在输入中添加data-codedata-id

这可能吗?任何想法

UPDATE

下面使用了这个,但改变的是下拉值,我想要的是像一样改变的输入

<input data-id="39" data-code="060400000">
response($.map(data, function(item) {
    return {
        title: item.name,
        value: item.name
    };
}));

使用渲染项函数

$(".autocomplete").data("ui-autocomplete")._renderItem = function(ul, item) {
 return '<li data-code="'+item.code+'" data-id="'+item.sysid+'">'+item.name+'</li>'
}

有关更多信息,请访问