【问题标题】：JQuery UI autocomplete not searching all arrayJQuery UI自动完成不搜索所有数组
【发布时间】：2018-12-26 16:09:13
【问题描述】：

我在 html 文件中使用 JQuery UI 自动完成功能。

自动完成需要检查我在数组中添加的类型、卧室和位置。但是，问题是自动完成只找到数组中第二个对象的类型。

如您所见，我有一个名为属性的数组，其中包含两个具有变量类型的对象。但我只能搜索第二个对象，不能同时搜索。

如果有人能帮忙，将不胜感激。

非常感谢！！！

【问题讨论】：

标签： javascript jquery html input autocomplete

【解决方案1】：

如果你在循环中声明你的数组，那么它将在每个循环中被重置，并且一旦你离开循环，只会出现最后一个变量。

我已经稍微调整了代码，现在它可以按照您的意愿工作。我已经评论了我的更改。

我在下面的原始代码中添加了 cmets，解释了你哪里出错了。

如果您还需要其他东西，请告诉我。

原始代码

// This loops through each propery in data
for (var i in data.properties) {

  // EVERYTHING here is done again, each time you move onto the next property.

  // This declares the array and assigns a single value to it (the current property). 
  // It will wipe all preceding data that was previously in the array (i.e. the last property value).
  // This should be BEFORE the loop, so that you don't reset it, it will need to be created as an empty array - i.e. let dataType = [];
  // To assign the current property you need to add it to the array using dataType.push(data.properties[i].type);
  let dataType = [data.properties[i].type];

  // Prints all current contents of the array, this will print each property, but only ever the current one, and by itself
  console.log(dataType)

  // Create the autocomplete form with the current value of the array (which only holds the current value
  // This should be AFTER the loop, so that the array has been filled with all properties
  $("#searchLocation").autocomplete({
    source: dataType,
  });

}

演示

var data = {
  "properties": [{
      "id": "prop1",
      "type": "House",
      "bedrooms": 3,
      "price": 650000,
      "tenure": "Freehold",
      "description": "Attractive three bedroom semi-detached family home situated within 0.5 miles of Petts Wood station with fast trains to London and within easy walking distance of local shops, schools, bus routes and National Trust woodland. The property comprises; two receptions, fitted 18'9 x 10'1 kitchen/breakfast room and conservatory. The property also benefits from having a utility room and cloakroom. To the first floor there are three bedrooms and a family bathroom with separate WC. Additional features include double glazing, gas central heating and a well presented interior...",
      "location": "Petts Wood Road, Petts Wood, Orpington",
      "picture": "images/prop1pic1small.jpg",
      "url": "properties/prop1.html",
      "added": {
        "month": "March",
        "day": 12,
        "year": 2018
      }
    },

    {
      "id": "prop2",
      "type": "Flat",
      "bedrooms": 2,
      "price": 299995,
      "tenure": "Freehold",
      "description": "Presented in excellent decorative order throughout is this two double bedroom, two bathroom, garden flat. <br>The modern fitted kitchen is open plan to the living room which boasts solid wooden floors and includes integrated appliances including a dishwasher & a washing machine. This large open plan benefits from bi folding doors onto a secluded private courtyard garden. Both bedrooms are double sized, and the family bathroom boasts a matching three piece suite a shower attachment over the bath. There is also a separate wet room. There are walnut doors throughout and wiring for Sky TV/aerial points in the living room/kitchen and both bedrooms.<br>This apartment being only five years old, is still under a 10 year building guarantee...",
      "location": "Crofton Road Orpington BR6",
      "picture": "images/prop2pic1small.jpg",
      "url": "properties/prop2.html",
      "added": {
        "month": "September",
        "day": 14,
        "year": 2018
      }
    },
  ]
};

// Bring array outside of loop, so it doesn't reset each loop
var dataType = [];

// Cycle through each property    
for (var i in data.properties) {

  // Append autocomplete values to array  
  dataType.push(data.properties[i].type);
  dataType.push(data.properties[i].location);

}

// Add autocomplete with array as data                
$("#searchLocation").autocomplete({
  source: dataType,
});

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <form>
    <input type="text" id="searchLocation" name="searchLocation">

  </form>
</body>

</html>

【讨论】：

不确定...尝试添加 datatype.push(data.properties[i].location);在循环中，在当前推送命令旁边。这可能行得通...
它确实有效...参见上面的代码。刚刚对其进行了编辑以包含位置。

【解决方案2】：

我认为您需要将以下 div 类添加到您的输入中。

<div class="ui-widget">
  <input id="searchLocation"> ...
</div>

【讨论】：