jquery ui自动完成结果太小了

时间：2016-06-18 05:33:59

标签： jquery twitter-bootstrap laravel

我确信我错过了一些东西，但不知道是什么。我有一个jquery自动完成字段，从mysql查询中获取数据。我得到了结果，但下拉列表的高度只有每个结果几个像素。

我使用的数据是

[{"id":1,"name":"France","created_at":"2016-06-18 05:05:27","updated_at":"2016-06-18 05:05:27"},{"id":2,"name":"United Kingdom","created_at":"2016-06-18 05:05:38","updated_at":"2016-06-18 05:05:38"},{"id":3,"name":"Sweden","created_at":"2016-06-18 05:05:46","updated_at":"2016-06-18 05:05:46"},{"id":4,"name":"Norway","created_at":"2016-06-18 05:05:50","updated_at":"2016-06-18 05:05:50"},{"id":5,"name":"Hungary","created_at":"2016-06-18 05:05:56","updated_at":"2016-06-18 05:05:56"},{"id":6,"name":"Germany","created_at":"2016-06-18 05:06:01","updated_at":"2016-06-18 05:06:01"},{"id":7,"name":"Austria","created_at":"2016-06-18 05:06:09","updated_at":"2016-06-18 05:06:09"},{"id":8,"name":"Slovakia","created_at":"2016-06-18 05:06:15","updated_at":"2016-06-18 05:06:15"},{"id":9,"name":"Romania","created_at":"2016-06-18 05:06:22","updated_at":"2016-06-18 05:06:22"},{"id":10,"name":"Ukraine","created_at":"2016-06-18 05:06:28","updated_at":"2016-06-18 05:06:28"}]

如果数据格式如下：

["France","United Kingdom","Sweden","Norway","Hungary","Germany","Austria","Slovakia","Romania","Ukraine"]

它显示应该。事情是我以后需要id字段 这是代码

<script> $(function(){
 $( "#cname" ).autocomplete({
  source: "{{url('country/complete')}}",
  minLength: 3,
  select: function(event, ui) {
    $('#cname').val(ui.item.name);
      }
   });
}); 
</script>

和

<div class="form-group">
     {!! Form::label('cname','Country')!!}
     {!! Form::text('cname', null, ['class'=>'form-control'])!!}
</div>

这是css和js          

<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>

    <style>
    body {
        font-family: 'Lato';
    }

    .fa-btn {
        margin-right: 6px;
    }
    </style>

1 个答案:

答案 0 :(得分：1)

jQuery自动完成功能可以使用3种格式的数据（实际上更多，我很快就会进入它）。

这一切都来自jQuery Autocomplete API documentation, source() option。

选项1：使用数组。

这是您在第一个带有国家/地区名称数组的示例中所做的事情。正如您可能检测到的那样，这完全消除了ID，因此您无法在以后将用户选择与实际国家/地区名称相关联，除非您进行反向搜索但这样效率很低。

$(function() {
  /******************** FIRST EXAMPLE *************************/
  var countryNames = ["France", "United Kingdom", "Sweden", "Norway", "Hungary", "Germany", "Austria", "Slovakia", "Romania", "Ukraine"];

  $("#cname1").autocomplete({
    source: countryNames,
    minLength: 3,
    select: function(event, ui) {
      console.debug("Selected value: " + ui.item.value);
    }
  });
});
body {
  font-family: 'Lato';
}
.fa-btn {
  margin-right: 6px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div class="form-group">
  <label for="cname1">Country (from array of strings)</label>
  <input type="text" id="cname1" name="cname1" class="form-control" />
</div>

选项2：使用标签 - 值对数组。

如果确保每个对象都有标签和值属性，jQuery自动完成将正确理解对象数组。这两个将分别映射到屏幕中显示的值，以及自动完成内部存储的值。

现在，这里的诀窍是，一旦用户选择了一个值，该ID将稍后用作输入的值，这是您不想要的，因为您可能仍然希望用户查看国家/地区名称，不是数字ID。

通过测试我看到jQuery自动完成实际上会让你回到你传递给它的原始对象，所以你可以给它id和标签，它会忽略ID并显示始终标签，但是你可以从select中读取它事件

$(function() {
  /******************** SECOND EXAMPLE *************************/
  var countries = [{
    "id": 1,
    "name": "France",
    "created_at": "2016-06-18 05:05:27",
    "updated_at": "2016-06-18 05:05:27"
  }, {
    "id": 2,
    "name": "United Kingdom",
    "created_at": "2016-06-18 05:05:38",
    "updated_at": "2016-06-18 05:05:38"
  }, {
    "id": 3,
    "name": "Sweden",
    "created_at": "2016-06-18 05:05:46",
    "updated_at": "2016-06-18 05:05:46"
  }, {
    "id": 4,
    "name": "Norway",
    "created_at": "2016-06-18 05:05:50",
    "updated_at": "2016-06-18 05:05:50"
  }, {
    "id": 5,
    "name": "Hungary",
    "created_at": "2016-06-18 05:05:56",
    "updated_at": "2016-06-18 05:05:56"
  }, {
    "id": 6,
    "name": "Germany",
    "created_at": "2016-06-18 05:06:01",
    "updated_at": "2016-06-18 05:06:01"
  }, {
    "id": 7,
    "name": "Austria",
    "created_at": "2016-06-18 05:06:09",
    "updated_at": "2016-06-18 05:06:09"
  }, {
    "id": 8,
    "name": "Slovakia",
    "created_at": "2016-06-18 05:06:15",
    "updated_at": "2016-06-18 05:06:15"
  }, {
    "id": 9,
    "name": "Romania",
    "created_at": "2016-06-18 05:06:22",
    "updated_at": "2016-06-18 05:06:22"
  }, {
    "id": 10,
    "name": "Ukraine",
    "created_at": "2016-06-18 05:06:28",
    "updated_at": "2016-06-18 05:06:28"
  }];

  var formattedCountries = countries.map(function(c) {
    return {
      label: c.name,
      id: c.id
    }
  });

  $("#cname2").autocomplete({
    source: formattedCountries,
    minLength: 3,
    select: function(event, ui) {
      console.debug("Selected value: " + ui.item.id);
    }
  });
});
body {
  font-family: 'Lato';
}
.fa-btn {
  margin-right: 6px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div class="form-group">
  <label for="cname2">Country (from array of objects)</label>
  <input type="text" id="cname2" name="cname2" class="form-control" />
</div>

选项3：网址字符串。

简单：一个URL字符串，jQuery自动完成将查询结果。结果必须采用上述格式之一。

选项4：使用您自己的对象，告诉窗口小部件如何呈现它们：

对不起，我会在这里偷懒。

您可以查看Autocomplete custom data example。它使用_renderItem函数，因此您可以准确地告诉jQuery如何呈现HTML以及要使用的对象的属性。

那么，为什么你看到它只有几个高度的物品？

（免责声明：这里的投机区。）

Autocomplete empty

如果源中的属性名称jQuery自动完成不等待，则会发生这种情况。例如，“name”和“id”。它实际上会显示一个自动完成值，但这将是空的，并且它将显示为屏幕的一小部分。

我猜测这就是你所看到的。

我希望这有帮助！

同时

相关问题
最新问题