Question

无论我在文本输入字段中输入什么内容，在远程获取数据时，每次都会得到相同的结果，并且在输入其他字符时不会过滤。

但是，如果我设置了一个products变量并在JSON响应中为其分配＆＃34; rows＆＃34;：的值，然后删除远程和转换对象并用local替换它们并将其分配给products变量，它完美无缺。（下面的工作本地示例）

我在远程示例中做错了什么？

＆＃13;

/* Results & Sample Json Response Are Further Below */

var bloodhound = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name"),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    /* CORS Bypass */
    url: "https://cors-anywhere.herokuapp.com/https://redacted.com/api/read/items/",
    prepare: function(query, settings) {
      settings.type = "POST";
      settings.contentType = "application/x-www-form-urlencoded";
      settings.data = {
        key: "redacted",
        token: "redacted"
      };
      return settings;
    },
    transform: function(products) {
      console.log(products.rows);
      return products.rows;
    }
  }
});

$(".typeahead").typeahead({
  hint: true,
  hightlight: true,
  minLength: 1
}, {
  name: "bloodhound",
  displayKey: "name",
  //display: "name",
  source: bloodhound.ttAdapter()
});

/* 
Query Results:

<div role="presentation" class="tt-dataset tt-dataset-bloodhound">
  <div role="option" id="tt-8cdec2fd-d242-c74e-4f3c-982e76ffde0f" class="tt-suggestion tt-selectable"> 
    Module Bounce House 
  </div>
  <div role="option" id="tt-5ce5f7aa-f7e2-25e0-7926-b3c6fe7648fd" class="tt-suggestion tt-selectable"> 
    Bouncer Combo 
  </div>
  <div role="option" id="tt-64e5423c-4b2b-6e54-5c0b-d91037d9f8a7" class="tt-suggestion tt-selectable">
    Obstacle Course &amp; Double Lane Slide
  </div>
  <div role="option" id="tt-6ec75aee-ae9d-4d18-a539-5af70108e1a5" class="tt-suggestion tt-selectable">
    Generator
  </div>
  <div role="option" id="tt-535945ed-63fb-b82d-8d15-510020179e08" class="tt-suggestion tt-selectable">
    22ft Big Rainbow Water Slide
  </div>
</div>

*/

/* 
Sample JSON Response:
{
    "row_count": 80,
    "rows": [
        {
            "name": "Module Bounce House",
            "picture": "https://redacted.com/cp/upload/items/Bounce-House-_Rental.jpg",
            "id": "73915",
            "categoryid": "2681",
            "base_cost": "139",
            "modifiers": [],
            "profileid": "1258"
        },
        {
            "name": "Bouncer Combo",
            "picture": "https://redacted.com/cp/upload/items/bouncer_combo_rental.png",
            "id": "73996",
            "categoryid": "2681",
            "base_cost": "199",
            "modifiers": [],
            "profileid": "1258"
        },
        {
            "name": "Obstacle Course & Double Lane Slide",
            "picture": "https://redacted.com/cp/upload/items/obstacle_course_double_lane_slide_inflatable_game_rentals-min.png",
            "id": "74031",
            "categoryid": "2682",
            "base_cost": "375",
            "modifiers": [],
            "profileid": "1258"
        },
        {
            "name": "Generator",
            "picture": "https://redacted.com/cp/upload/items/generator.png",
            "id": "74045",
            "categoryid": "2693",
            "base_cost": " 65.00",
            "modifiers": [],
            "profileid": "1258"
        },
        {
            "name": "22ft Big Rainbow Water Slide",
            "picture": "https://redacted.com/cp/upload/items/rainbow_screamer_water_slide.png",
            "id": "74046",
            "categoryid": "2679",
            "base_cost": "269",
            "modifiers": [],
            "profileid": "1258"
        },
        {
            "name": "22ft Rainbow Water Slide w Slip n Slide ",
            "picture": "https://redacted.com/cp/upload/items/22ft_water_slide_w_slip_n_slide.png",
            "id": "74047",
            "categoryid": "2679",
            "base_cost": "329",
            "modifiers": [],
            "profileid": "1258"
        },
        {
            "name": "Lava Slip & Slide ",
            "picture": "https://redacted.com/cp/upload/items/Volcano_Slip_n_Slide.jpg",
            "id": "74048",
            "categoryid": "2679",
            "base_cost": "219",
            "modifiers": [],
            "profileid": "1258"
        },
        {
            "name": "14ft Double Lane Water Slide",
            "picture": "https://redacted.com/cp/upload/items/14ft_double_lane_water_slide_with_pool.png",
            "id": "74051",
            "categoryid": "2679",
            "base_cost": "219",
            "modifiers": [],
            "profileid": "1258"
        },
        {
            "name": "18ft Big Rainbow Water Slide ",
            "picture": "https://redacted.com/cp/upload/items/18ft_rainbow_slide.png",
            "id": "74052",
            "categoryid": "2679",
            "base_cost": "235",
            "modifiers": [],
            "profileid": "1258"
        },
        {
            "name": "Caution Bounce House",
            "picture": "https://redacted.com/cp/upload/items/14ft_caustic_bouncy_jumper.png",
            "id": "74147",
            "categoryid": "2681",
            "base_cost": "139",
            "modifiers": [],
            "profileid": "1258"
        }
    ],
    "status": "Success",
    "elapsed": "0.01"
}
*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.2.1/typeahead.bundle.js"></script>
<div id="test">
  <input class="typeahead" type="text">
</div>

＆＃13;

工作本地示例

＆＃13;

var products = [{
    "name": "Module Bounce House",
    "picture": "https://redacted.com/cp/upload/items/Bounce-House-_Rental.jpg",
    "id": "73915",
    "categoryid": "2681",
    "base_cost": "139",
    "modifiers": [],
    "profileid": "1258"
  },
  {
    "name": "Bouncer Combo",
    "picture": "https://redacted.com/cp/upload/items/bouncer_combo_rental.png",
    "id": "73996",
    "categoryid": "2681",
    "base_cost": "199",
    "modifiers": [],
    "profileid": "1258"
  },
  {
    "name": "Obstacle Course & Double Lane Slide",
    "picture": "https://redacted.com/cp/upload/items/obstacle_course_double_lane_slide_inflatable_game_rentals-min.png",
    "id": "74031",
    "categoryid": "2682",
    "base_cost": "375",
    "modifiers": [],
    "profileid": "1258"
  },
  {
    "name": "Generator",
    "picture": "https://redacted.com/cp/upload/items/generator.png",
    "id": "74045",
    "categoryid": "2693",
    "base_cost": " 65.00",
    "modifiers": [],
    "profileid": "1258"
  },
  {
    "name": "22ft Big Rainbow Water Slide",
    "picture": "https://redacted.com/cp/upload/items/rainbow_screamer_water_slide.png",
    "id": "74046",
    "categoryid": "2679",
    "base_cost": "269",
    "modifiers": [],
    "profileid": "1258"
  },
  {
    "name": "22ft Rainbow Water Slide w Slip n Slide ",
    "picture": "https://redacted.com/cp/upload/items/22ft_water_slide_w_slip_n_slide.png",
    "id": "74047",
    "categoryid": "2679",
    "base_cost": "329",
    "modifiers": [],
    "profileid": "1258"
  },
  {
    "name": "Lava Slip & Slide ",
    "picture": "https://redacted.com/cp/upload/items/Volcano_Slip_n_Slide.jpg",
    "id": "74048",
    "categoryid": "2679",
    "base_cost": "219",
    "modifiers": [],
    "profileid": "1258"
  },
  {
    "name": "14ft Double Lane Water Slide",
    "picture": "https://redacted.com/cp/upload/items/14ft_double_lane_water_slide_with_pool.png",
    "id": "74051",
    "categoryid": "2679",
    "base_cost": "219",
    "modifiers": [],
    "profileid": "1258"
  },
  {
    "name": "18ft Big Rainbow Water Slide ",
    "picture": "https://redacted.com/cp/upload/items/18ft_rainbow_slide.png",
    "id": "74052",
    "categoryid": "2679",
    "base_cost": "235",
    "modifiers": [],
    "profileid": "1258"
  },
  {
    "name": "Caution Bounce House",
    "picture": "https://redacted.com/cp/upload/items/14ft_caustic_bouncy_jumper.png",
    "id": "74147",
    "categoryid": "2681",
    "base_cost": "139",
    "modifiers": [],
    "profileid": "1258"
  }
];

var bloodhound = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name"),
  /*datumTokenizer: function(d) {
    Bloodhound.tokenizers.obj.whitespace(d.name)
  },*/
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: products
});

$(".typeahead").typeahead({
  hint: true,
  hightlight: true,
  minLength: 1
}, {
  name: "bloodhound",
  displayKey: "name",
  //display: "name",
  source: bloodhound.ttAdapter()
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.2.1/typeahead.bundle.js"></script>
<div id="test">
  <input class="typeahead" type="text">
</div>

＆＃13;

Twitter Typeahead.js＆amp; Bloodhound保持显示相同的结果，无论输入的文本

0 个答案: