在 jquery ajax 中使用动态数据实现自动完成

2023-12-01

我在 ASP.Net MVC 应用程序中使用 Materialize ui,并且使用带有动态数据的自动完成控件。

这是我的代码,

<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 调用,

$(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
                }
            });
        }
    });
});

它只能接受这种格式的数据,这是我的回应,

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

如何将我的回复转换为自动完成功能可以理解的格式?


使用ajax API调用materializecss输入自动完成
我进行了如下修改以获得国家/地区的自动完成输入。

您可以从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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 jquery ajax 中使用动态数据实现自动完成 的相关文章

  • 如何将一个数组中的所有项目复制到另一个数组中?

    如何将数组的每个元素 其中元素是对象 复制到另一个数组中 以便它们完全独立 我不想更改一个数组中的元素来影响另一个数组 这里的关键是 数组中的条目是对象 并且 您不希望对一个数组中的对象的修改显示在另一个数组中 这意味着我们不仅需要将对象复
  • EmberJS:对象作为查询参数来刷新模型

    我遵循了查询参数指南 http guides emberjs com v1 11 0 routing query params http guides emberjs com v1 11 0 routing query params 而且效
  • 正则表达式中连字符的这种用法有效吗?

    NB I only想知道它是否是正则表达式定义中未转义连字符的有效应用 它是not关于匹配电子邮件 连字符或反斜杠的含义 量词或其他任何内容的问题 另外 请注意 链接的答案并没有真正讨论转义 未转义连字符之间的有效性问题 通常我会像这样声明
  • 使用javascript以编程方式触发iOS safari中的复制菜单?

    我正在尝试实现一种用户友好的方式 将一些文本从文本输入字段复制到 iOS Safari 上的剪贴板 我知道无法在这个平台上以编程方式完成此操作 但我希望能够尽可能地指导用户体验 在 iOS Safari 上 当用户手动突出显示某些文本时 会
  • Twitter Typeahead 上使用 Bootstrap 3 的 CSS 问题

    随着 Bootstrap 3 的发布 Typeahead 已被删除 取而代之的是 https github com twitter typeahead js https github com twitter typeahead js 我已经
  • 如何显示接下来的三个图像单击加载更多按钮

    我需要一个加载更多按钮来显示图像 页面加载时 我显示 3 个图像 单击 加载更多 按钮后 接下来的 3 个图像将显示在屏幕上 我尝试了下面的代码 但它不起作用 你能帮我解决这个问题吗 function item slice 0 2 show
  • Firefox Addon 中的 JQuery 导致多个警告

    我在 Firefox 插件中使用 jquery 但我不断收到大量警告消息 如下所示 anonymous function does not always return a value System JS WARNING resource g
  • Angular2:动态同步http请求

    Goal 发出一系列同步 http 请求并能够将它们作为一个可观察流进行订阅 示例 不工作 let query arr test1 test2 test3 function make request query arr if query a
  • 如何在React中动态分配属性?

    这是一个有两个参数的函数 我要创建的标签的名称 具有以下属性的对象 Using React 我创建一个组件并将该元素渲染到 DOM 问题是我想向元素添加属性 但它不允许循环在元素内设置属性 var Element function elem
  • Svelte 条件元素类报告为语法错误

    我正在做一个if块每if 块的精简指南 https svelte technology guide if blocks 这看起来很简单 但 Svelte 认为这是一个语法错误 svelte plugin ParseError Unexpec
  • 如何从 CSS 选择器中提取类名?

    故事 我目前正在构建一个 ESLint 规则 以警告在 CSS 选择器定位器中使用引导布局导向和角度技术类 目前我在字符串方法中使用简单的子字符串 for var i 0 i lt prohibitedClasses length i if
  • 从网页运行 ClickOnce 应用程序,无需用户操作

    我们有一个基于 Java 的 Web 应用程序以及用 C 编写的相同应用程序 如果 java 检查器发现客户端计算机上没有安装 Java 则应该运行该应用程序 这个想法是运行 C 单击一次 http en wikipedia org wik
  • 如何在 TypeScript 中使用 navigation.replace ?

    我试图在我的代码中使用它 const navigation useNavigation navigation replace AllFriends 但我不断收到错误消息 Property replace does not exist on
  • 如何跨多个文件跨越 javascript 命名空间?

    我永远忽略了javascript 几年前我开始使用 jQuery 这样我就可以过得去 但随着我开始更多地进行 TDD 我昨天决定真正深入研究 javascript 之后可能还有咖啡脚本 在我的 ASP NET Web 窗体应用程序中 我有很
  • 触发 jQuery UI 滑块事件

    如何触发更改事件jQuery UI 滑块 http docs jquery com UI Slider 我以为会是 slider trigger slidechange 但这没有任何作用 完整的示例脚本如下
  • jQuery Mobile + Admob:轮换?

    我使用 jQuery Mobile 框架创建了一个移动应用程序 所有页面都在index php中加载 使用 div 在每个页面的页脚中 我添加了Admob代码 div div div
  • 更改 Python Cmd 模块处理自动完成的方式

    我有一个 Cmd 控制台 设置为自动完成 Magic the Gathering 收藏管理系统的卡牌名称 它使用文本参数在数据库中查询卡片 并使用结果自动完成 建议卡片 然而 这些卡片名称有多个单词 Cmd 会从last到行尾的空间 例如
  • 从更多元素中仅获取唯一名称

    我动态渲染了 HTML 其中列出了未确定数量的单选按钮 这些按钮的名称代表数据库中的某些 id 我需要收集收音机的所有唯一名称 这是一个例子
  • 将引导程序弹出框保留在视口内

    我正在尝试使用带有按钮的侧边栏创建一个菜单 每个按钮都有一个指定的包含相关数据的弹出窗口 不幸的是 其中一个弹出窗口可能包含任意数量的行 并且在某些情况下它可能部分位于视口之外 See http jsfiddle net bfd9f 1 h
  • Cycle2 初始化事件未触发

    我使用 Cycle2 作为基本的轮播 我的幻灯片项目有时在其数据中包含一个 url 因此我必须使用 Cycle2 api 事件来使用该 url 当它存在时 我的问题是 虽然 cycle after 事件触发正常 但初始化事件都不会触发 因此

随机推荐

  • MIFARE Classic:如何找到良好的访问字节值

    我的目标是仅进行 KEY A 身份验证并禁用 Key B 用于存储数据的空间 我阅读了这些文档 http www nxp com documents data sheet MF1S503x pdf http dangerousthings
  • GetContentHeight() 无法正常工作

    我正在尝试检索网络视图内容的高度 它包含一个 html 字符串 问题是 getContentHeight 总是返回相同的值 392 无论 html 字符串有多长 这个问题已经让我抓狂了 让我猜测一下 您的内容不是从网络或文件系统加载的 而是
  • 从字符串获取 DbSet

    ADO NET 用户首次尝试 EF 我正在尝试从表名字符串中获取一个表 比我想象的还要难 基本上我在这里 var tableName Name Entities Measure measureType var table Activator
  • 如何将 JSON api 日期与 FSCalendar 进行比较并在表格视图中显示事件?

    我在日历中显示了事件点 但无法根据表格视图中的月份显示相同的事件 我想显示这些事件 例如如果我们更改月份并且表格视图数据事件应该更改 我很困惑如何做到这一点 我正在使用 FSCalendar 来显示 dot 和 tableview 等事件
  • 如何重新安装 NetBeans?所有可用组件(包和运行时)都已安装,如何继续?

    NetBeans 重新安装出现问题 第一个工作正常 所有可用组件均已安装 单击 取消 退出安装程序 没办法继续下去了 之前 我使用 全部 完整下载选项 215 MB 下载并安装了 NetBeans IDE 8 1 的窗口版本 其中包含 Ne
  • iText - 可点击的图像应该打开 MS Word 附件

    如何使图像可点击以便打开附加的 ms word 文档 我这里有一些 PDF 其中有一些图像 ms word 图标 图标下方有 ms word 文件名 通过单击图像打开附加的 ms word 文档 我想知道如何使用 iText 库执行此操作
  • 为什么有些人在循环宏的子句中使用关键字?

    它能解决任何问题吗 根据 PCL 的第一个脚注 如果不是关键字 它会将符号保留在当前包中 由于所有关键字都被保留在关键字包中 因此可以防止多个符号被保留在不同的包中 但还有其他优点吗 它会产生什么问题 我猜一定有问题 因为这不是普遍的惯例
  • 极坐标图中的箭头

    我试图绘制串联 R L C 电路中电阻器 电容器和电感器两端电压的相量 我已经完成了所有的计算 我可以用正常的方式得到一个像样的图ax plot theta r 我想让相量向量看起来像箭头 我一直在尝试使用ax arrow 0 0 thet
  • 为什么需要 Lambda 函数将值传递给 @onclick 调用的方法?

    我是 Blazor 以及一般的 Web 开发人员 的新手 我跟着Microsoft 的 Blazor Web 应用程序待办事项列表教程 在完成上述教程后 我想进一步在每个列表元素旁边添加按钮以将它们从列表中删除 这是我为实现这一目标而编写的
  • 使用Postman发送PATCH到Asp.net Core webapi时出错

    我有一个模型 public class Order public Guid Id get set public IEnumerable
  • matplotlib twinx 在循环内

    我有一个循环 在特定条件下 例如出现 3 次 我想用 twinx 绘制两个数据集 所以例如最后我在左 y 上有 3 个图 在右 y 上有 3 个图 当我使用通常的 twinx 时 循环的右 y 值不正确 我应该如何修改此示例代码才能使其正确
  • 何时要求子句表达式需要加括号? (偶然的双关语)

    这给出了一个错误 template
  • document.getElementById 替换 angular4 / typescript 中的?

    我在实践工作中使用 Angular4 这对我来说是新的 为了获取 HTML 元素及其值 我使用了
  • 如何在ListView列表项中添加节标题

    我想开发 国家历史 Android应用程序 但我有一个问题 我无法将国家 地区标题放入列表视图列表项中 我想放标题 例如 非洲 北非 撒哈拉以南非洲 亚洲 北亚 西亚和中亚 南亚和东南亚 欧洲 北美和中美洲 北美洲 大洋洲 南美洲 这是我的
  • 如何用多个分隔符分割字符串并保留分隔符?

    我有例如这个字符串 abc 现在 我想把它分成 分隔符 我知道我可以使用 String split 来实现这一点 但有没有办法可以通过这个符号来分割 if 但又不会丢失它 就像如果我使用 split 我会得到这个string abc 而且我
  • 用于维护计数器和聚合的 Firebase 控制服务器

    It s a 已知问题firebase 没有简单的方法来计算项目 我计划创建一个严重依赖计数和其他聚合的应用程序 我担心按照建议的规则创建此应用程序的计数器here将非常复杂且难以维护 所以我想到了这个模式 我将保留一个服务器来侦听数据库中
  • 强制 Sympy 在 MathJax Jupyter 中打印数学

    我正在使用 VSCode 和 Jupyter 来处理 Sympy 通常 它以 MathJax 格式打印数学方程 sympy 文档说 在IPython笔记本中 它将使用MathJax来渲染LATEX MathJax 输出 但是 当我安装 ma
  • 捕获 Mysqli 错误

    我定义了一个自定义错误处理程序 它捕获所有异常并将它们保存到日志中 现在 如果我在 mysqli 查询中出现语法错误 例如拼写错误 页面将在此时完全停止加载 不会引发异常 因此不会触发错误处理程序并且不会记录任何内容 这是正常的吗 我应该检
  • 如何渐变填充按钮的背景?

    我必须创建一个带有渐变填充的彩色按钮 从按钮的中间沿 Y 轴开始 如果我将按钮的背景属性设置为我想要的颜色 我会丢失rounded按钮的外观和感觉以及渐变填充 它看起来像TextView有背景 另外 我希望当用户按下按钮时改变这种颜色 我可
  • 在 jquery ajax 中使用动态数据实现自动完成

    我在 ASP Net MVC 应用程序中使用 Materialize ui 并且使用带有动态数据的自动完成控件 这是我的代码 div class row div class col s12 div class row div class i