使用jquery ajax中的动态数据实现自动完成 [英] Materialize autocomplete with dynamic data in jquery ajax

问题描述

我正在ASP.Net MVC应用程序中使用materialize ui，我正在使用带动态数据的自动完成控件。

I'm using materialize ui in an ASP.Net MVC application and I'm using an autocomplete control with dynamic data.

这是我的代码，

<div class="row">
    <div class="col s12">
        <div class="row">
            <div class="input-field col s12">
                <i class="material-icons prefix">textsms</i>
                <input type="text" id="autocomplete-input" class="autocomplete">
                <label for="autocomplete-input">Autocomplete</label>
            </div>
        </div>
    </div>
</div>

这是jquery ajax调用，

This is the jquery ajax call,

$(function () {
    $.ajax({
        type: 'GET', // your request type
        url: "/Home/GetData/",
        success: function (response) {
            var myArray = $.parseJSON(response);

            debugger;
            $('input.autocomplete').autocomplete({
                data: {
                    "Arizona (1)": null,
                    "Florida (2)": null,
                    "Georgia (3)": null,
                    "Hawaii(4)": null, 
                    "Idaho (5)": null,
                    "Illinois (6)": null
                }
            });
        }
    });
});

它只接受此格式的数据，这是我的回复，

It can accept data only in this format and this is my response,

"[["Arizona (1)"],["Florida (2)"],["Georgia (3)"],["Hawaii (4)"],["Idaho (5)"],["Illinois (6)"]]"

如何将我的响应转换为自动完成理解的格式？

How do I convert my response into the format that autocomplete understands?

推荐答案

对materializecss使用ajax API调用输入自动完成

我已修改如下以获取国家/地区的自动填充输入。

您可以从API https：//获取国家/地区名称列表restcountries.eu/rest/v2/all?fields=name

$(document).ready(function() {
  //Autocomplete
  $(function() {
    $.ajax({
      type: 'GET',
      url: 'https://restcountries.eu/rest/v2/all?fields=name',
      success: function(response) {
        var countryArray = response;
        var dataCountry = {};
        for (var i = 0; i < countryArray.length; i++) {
          //console.log(countryArray[i].name);
          dataCountry[countryArray[i].name] = countryArray[i].flag; //countryArray[i].flag or null
        }
        $('input.autocomplete').autocomplete({
          data: dataCountry,
          limit: 5, // The max amount of results that can be shown at once. Default: Infinity.
        });
      }
    });
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<div class="row">
  <div class="col s12">
    <div class="row">
      <div class="input-field col s12">
        <label for="country">Autocomplete</label>
        <input type="text" id="country" class="autocomplete">

      </div>
    </div>
  </div>
</div>

这篇关于使用jquery ajax中的动态数据实现自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！