Question

我正在尝试使bootstrap / jquery自动完成工作。借助@ Rav大多数操作系统，它可以与'select: function( event, ui ) {'分开工作。当用户开始在“ #client_name”文本字段中输入文本时，在三个字符之后，会出现一个可能的选项列表。

选择了其中一个选项，它起作用了，但是随后我需要填充'$('#company_image_1')'。

Ajax返回看起来像这样：

["BRITA|Brita.png|LONHA","Britannia|BrittaniaPharmaceuticals.png|","Britannia Pharmaceuticals Ltd|Britannia_1.png|GILHR","British Airports Authority|baa.png|LHRPQ"]

以下代码是我正在尝试的代码：

$(document).ready(function() { 
  $("#LookUpCompanyImage").html('');
    $('#client_name').autocomplete({
      minLength: 3,
      appendTo: "#suggestion_container",
      "position": { my : "right top", at: "right bottom", collision: "flip" },
      source: function( request, response ) {
        $.ajax({
          url : 'check_name.php',
          type: "get",
          dataType: "json",
          data: {
            name_startsWith: request.term,
            row_num : 1
          },
          success: function( data ) {
            response( $.map( data, function( item ) {
              var code = item.split("|");
              console.log("CODE", code);
              return {
                label: code[0],
                value: code[0],
                data : item
              };
            }));
          },
          autoFocus: true,

         select: function( event, ui ) {
           var names = ui.item.data.split("|");
           $('#company_image_1').val(names[1]);
           $("#LookUpCompanyImage").html("<img src=\"../../../../../apps/conf/conf_images/adminsmall/" + names[1] + "\">");
         }
       }
     );
    }
  });
});

谁能看到为什么未填充'$('#company_image_1').val(names[1]);'的情况。

在此先感谢您的帮助和时间。

Answer 1

您尚未正确结束source属性。这意味着实际上select中的autoFocus和autocomplete属性是在ajax函数中声明的。

语法应如下：

$(document).ready(function() {
  $('#LookUpCompanyImage').html('');
  $('#client_name').autocomplete({
    minLength: 3,
    appendTo: '#suggestion_container',
    position: { my: 'right top', at: 'right bottom', collision: 'flip' },
    
    source: function(request, response) {
      $.ajax({
        url: 'check_name.php',
        type: 'get',
        dataType: 'json',
        data: {
          name_startsWith: request.term,
          row_num: 1
        },
        success: function(data) {
          response(
            $.map(data, function(item) {
              var code = item.split('|');
              console.log('CODE', code);
              return {
                label: code[0],
                value: code[0],
                data: item
              };
            })
          );
        }
      });
    },
    
    autoFocus: true,
    select: function(event, ui) {
      var names = ui.item.data.split('|');
      $('#company_image_1').val(names[1]);
      $('#LookUpCompanyImage').html(
        '<img src="../../../../../apps/conf/conf_images/adminsmall/' +
          names[1] +
          '">'
      );
    }
  });
});

为什么Bootstrap自动完成选择无法正常工作？

1 个答案: