首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jquery ui autocomplete:如何在文本输入失去焦点后取消缓慢的ajax请求

在jQuery UI Autocomplete中,当文本输入框失去焦点时,可以通过使用source选项的cancel方法来取消正在进行的AJAX请求。以下是一个示例代码:

代码语言:javascript
复制
$(function() {
  var input = $("#input");
  var cancel = null;

  input.autocomplete({
    source: function(request, response) {
      if (cancel) {
        cancel.abort();
      }

      var xhr = $.ajax({
        url: "your-ajax-url",
        dataType: "json",
        data: {
          term: request.term
        },
        success: function(data) {
          response(data);
        }
      });

      cancel = xhr;
    },
    minLength: 2,
    select: function(event, ui) {
      // 处理选择事件
    }
  });

  input.blur(function() {
    if (cancel) {
      cancel.abort();
    }
  });
});

在这个示例中,我们使用了一个名为cancel的变量来存储当前的AJAX请求。当输入框失去焦点时,我们使用cancel.abort()方法来取消正在进行的AJAX请求。

请注意,这个示例中的your-ajax-url应该替换为您的实际AJAX请求的URL。

推荐的腾讯云相关产品:

  • 腾讯云API网关:帮助您构建、发布、管理和保护API服务。
  • 腾讯云云服务器:提供可扩展的计算能力,以满足您的业务需求。
  • 腾讯云数据库:提供MySQL、PostgreSQL、MongoDB等多种数据库服务。
  • 腾讯云CDN:加速全球访问速度,提高网站性能。

这些产品可以帮助您构建一个高性能、可扩展的云计算应用程序。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript实现模糊推荐input框(类似搜索框)

如何用JS实现一个类似搜索框输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到jquery-uiautocompletejquery...废话少说直接上代码: 引用,需要jquery-uijquery: <link rel="stylesheet" href="/static/plugins/jqueryui1/<em>jquery</em>-<em>ui</em>-<em>autocomplete</em>.css...自动填充 2、keyup事件 3、<em>ajax</em>与后端交互 简单来说: 1、<em>文本</em><em>输入</em>框<em>的</em>每次键入,触发一个keyup事件; 2、事件<em>的</em>处理方式是向后端<em>请求</em>模糊推荐<em>的</em>项items,这里<em>的</em>返回数据结果是: {..."pathN"] } 3、autocomplete自动填充hidden输入框,其余事情jquery-ui会为你处理好; 4、当你点选完成,或者是输入完成,path框失去焦点(blur事件...)时候,会从后端请求数据,自动填充好各个输入框add_field。

4.5K90

jQuery基础(五)一Ajax应用与常用插件-imooc

使用ajaxSetup()方法设置全局Ajax默认选项 使用ajaxSetup()方法可以设置Ajax请求一些全局性选项值,设置完成,后面的Ajax请求将不需要再添加这些选项值,它调用格式为: jQuery.ajaxSetup...ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成触发函数。...cookie用户名 搜索插件——autocomplete 搜索插件功能是通过插件autocomplete()方法与文本框相绑定,当文本输入字符时,绑定插件将返回与字符相近字符串提示选择,...为调用插件方法时配置对象 jQuery Autocomplete 使用详细说明 例如,当用户在文本输入内容时,调用搜索插件autocomplete()方法返回与输入内容相匹配字符串数据,显示在文本框下...3-8微调按钮插件——spinner 微调按钮插件不仅能在文本框中直接输入数值,还可以通过点击输入框右侧上下按钮修改输入值,还支持键盘上下方向键改变输入值,调用格式如下: $(selector)

16.5K20
  • jQuery常用内容总结(二)

    都是经过jQuery封装过,至于写法大致有ajax标准写法和jQuery简写两种,下面先给出这两种写法样式-> $.ajax({ type : "post",...alert("删除出错:" + d.error.msg); 4 return; 5 } 6 /*请求成功逻辑代码...*/ 7 });   以上第一种(同步)是ajax标准写法,第二种(异步)是jQuery简洁写法,当然如果是异步的话这两种写法都可行,但是,如果是同步(涉及到多个请求并且分前后的话...,形如:$("#id").bind("click mouseover",function(){})  on():用于绑定未来元素事件,一般在插入dom时会使用到 blur():匹配dom失去焦点事件...2>对话输入弹窗 ? ? 3>按钮是/否 弹框 ? ? 4>html子窗 弹窗 ? ?  5>jQuery UI弹窗(需要引入jquery UI) ? ?

    2.9K40

    jQuery常用内容总结(二)

    都是经过jQuery封装过,至于写法大致有ajax标准写法和jQuery简写两种,下面先给出这两种写法样式-> $.ajax({ type : "post",...alert("删除出错:" + d.error.msg); 4 return; 5 } 6 /*请求成功逻辑代码...*/ 7 });   以上第一种(同步)是ajax标准写法,第二种(异步)是jQuery简洁写法,当然如果是异步的话这两种写法都可行,但是,如果是同步(涉及到多个请求并且分前后的话...,形如:$("#id").bind("click mouseover",function(){})  on():用于绑定未来元素事件,一般在插入dom时会使用到 blur():匹配dom失去焦点事件...2>对话输入弹窗 ? ? 3>按钮是/否 弹框 ? ? 4>html子窗 弹窗 ? ?  5>jQuery UI弹窗(需要引入jquery UI) ? ?

    1.4K110

    jQuery常用内容总结(二)

    ,接下来所说ajax都是经过jQuery封装过,至于写法大致有ajax标准写法和jQuery简写两种,下面先给出这两种写法样式-> $.ajax({ type : "post...alert("删除出错:" + d.error.msg); 4 return; 5 } 6 /*请求成功逻辑代码...*/ 7 });   以上第一种(同步)是ajax标准写法,第二种(异步)是jQuery简洁写法,当然如果是异步的话这两种写法都可行,但是,如果是同步(涉及到多个请求并且分前后的话...,形如:$("#id").bind("click mouseover",function(){})  on():用于绑定未来元素事件,一般在插入dom时会使用到 blur():匹配dom失去焦点事件...2>对话输入弹窗 ? ? 3>按钮是/否 弹框 ? ? 4>html子窗 弹窗 ? ?  5>jQuery UI弹窗(需要引入jquery UI) ? ?

    1.2K30

    Ajax研究

    利用AJAX可以做: 注册时,输入用户名自动检测用户是否已经存在。 登陆时,提示用户名密码错误 删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功,在页面DOM中将数据行也删除。...XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。 jQuery 提供多个与 AJAX 有关方法。...通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页被选元素中。..., 发起一个请求(携带信息)到后台--%> 用户名:...打开浏览器控制台,当我们鼠标离开输入时候,可以看到发出了一个ajax请求!是后台返回给我们结果!测试成功!

    92550

    Web-第十五天 Ajax学习【悟空教程】

    Web-第十五天 Ajax学习【悟空教程】 JS AjaxjQuery Ajax 今日内容介绍 案例:异步用户名校验 案例:异步自动填充 今日内容学习目标 使用jQuery可以发送ajax请求 将...失去焦点时,使用$.post() 将用户名username以ajax方式发送给服务器 2....步骤2:给按钮添加id属性,并设置禁用,使用bootstrap样式显示禁用效果。 ? 步骤3:编写js,当input失去焦点,发送ajax,并控制提示信息显示和按钮是否可用。...类似百度,当我们输入搜索条件时,将自动填充我们需要数据,并提供选择,我们将此类功能称为:自动填充(autocomplete)。...1.用户输入搜索条件,键盘弹起时,发送ajax请求,将用户输入内容发送给服务器 2.1 服务器获得用户输入内容 2.2 根据要求拼凑查询条件,商品名称需要匹配,拼音也需要匹配,用户项可以不连续。

    1.5K30

    关于 devbridge-autocomplete 插件多选操作实现方法

    目前据我所知最好用 autocomplete 插件就是 jquery-ui autocomplete 以及 devbridge autocomplete 插件。...我最终选择了 devbridge autocomplete 插件,主要是不想引用 jquery-ui css 文件。...:服务器端URL或者是返回 Url 字符串回调函数 ajaxSettings:jQuery Ajax 请求额外配置 lookup:查询数据列表。...,默认值:1 maxHeight:提示列表容器最大高度,默认值:300 deferRequestBy:延迟Ajax请求毫秒数,默认值:0 width:提示容器宽度,默认值:auto params:...参数传递请求,可选 formatResult:function (suggestion, currentValue) {} delimiter:字符串或正则表达式,分割输入值并将最后一个作为查询词,一般逗号分割

    1.5K80

    jQuery进阶前言

    前言: 在《jQuery入门》一文中,记录了jQuery选择器、属性与样式和DOM操作等内容,本文将对jQuery事件以及Ajax相关知识点进行讲解。接下来就一起来学习一下。...5、focusin()和focusout()事件: focusin()是获取焦点事件。比如有一个输入框,要在该输入输入文字,我们首先得用鼠标点一下该输入框,这就叫获取焦点。...focusout()相反,就是失去焦点,用法和focusin()类似。 二、表单事件: 1、blur()和focus(): 这两个就是处理表单焦点事件,blur()是失去焦点,focus是聚焦。...就会触发change()事件,输入框中改变内容就会输出到“输出结果”这个div种中。...3、select()事件: 当 textarea 或文本类型 input 元素中文本被选择时,会发生 select 事件。

    2.4K20

    form表单提交几种方式

    可用类型如下: xml:返回XML文档,可用JQuery处理。 html:返回纯文本HTML信息;包含script标签会在插入DOM时执行。...script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。...,JQuery将自动替换一个“?”为正确函数名,以执行回调函数。 text:返回纯文本字符串。...返货成功即可 这里遇到一个问题:就是传过去数据,返回值正常,但进入了error ,使用console打印error时出现 parsererror 错误原因:ajaxdatatype设置问题 我之前设置为...size 属性规定输入字段尺寸 maxlength 属性规定输入字段允许最大长度 H5之后添加属性 autocomplete 属性规定表单或输入字段是否应该自动完成。

    6.4K20

    JQuery 文本输入框放大镜效果

    JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!...通过JS不断监听输入框值变化(通过jquerykeyup事件),有值的话 把内容值赋值给那显示div上去。...但是KISSY是支持,因为KISSY有一个valueChange事件 可以不断监听键盘操作(原理是:用个定时器不断检测输入框值得变化),鼠标右键操作等等事件,也就是说可以实时监听输入框之前值,之后值得变化...,但是Jquery目前没有这个事件。...5.绑定点击焦点失去焦点事件。(点击焦点显示,失去焦点隐藏)等等。 2. 格式化一下显示方式:代码如下: ?

    2.7K30

    AJAX培训笔记_js基础笔记

    ajax方法实现文本数据返回 verify.js---->verifyJquery.js $.ajax({ //type:"get", //url:"ajaxServer?...: 在文本框中输入“中” 11:jQuery部分方法练习 test1.html ------- //1、简单:伪类 //:first var firstul = $("ul:first"); //alert...4、清空td内容 5、创建一个input输入域 6、将临时变量值赋给input输入value值 7、将该input元素插入到当前td中 8、取消绑定到该td上click事件 完善点1:修改单击回车键...= "") { clearTimeout(timeout); //服务器请求加上延时,最后一个keyup再发送请求 timeout = setTimeout(function() { $.post("autoComplete...$(html):根据提供HTML字符串,创建DOM 元素,:$(“Hello") $(elements):将一个或多个DOM元素转化为jQuery对象,:$(document.body

    6.5K10

    jQuery学习笔记

    ():选取小于指定索引元素 :focus 选取所有失去焦点元素 :header 选取所有标题元素(h1\h2\h3……) :animated 匹配所有正在执行动画操作元素...,指定索引) filter()返回可匹配所有元素 not() 返回不匹配所有元素 jQuery AJAX AJAX AJAX = 异步JavaScript + XML 在不重载网页情况下...,后台加载数据并显示在页面上 AJAX菜鸟教程 jQuery ajax()方法 AJAX load() load() 从服务器加载数据,并返回数据 常常利用:调用一个重复代码块,例如网页导航...-- URL:加载数据文件位置uRL data:与URL加载请求一起发送字符串键/值对集合 callback:执行完毕调用函数 - responseTxt : 调用成功结果 -...statusTXT : 调用状态 - xhr : XMLHttpRequest对象 --> AJAX GET() $.get() 从指定资源请求数据 语法 $.get(URL , callback

    7.4K30

    SpringMVC-06 Ajax

    利用AJAX可以做: 注册时,输入用户名自动检测用户是否已经存在。 登陆时,提示用户名密码错误 删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功,在页面DOM中将数据行也删除。...3.jQuery.ajax Ajax核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。...通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页被选元素中。...jQuery.ajax(…) 部分参数: url:请求地址 type:请求方式,GET、POST(1.9.0之后用method) headers:请求头 data:要发送数据 contentType...--%> 用户名: 当我们鼠标离开输入时候,可以看到发出了一个ajax请求,是后台返回给我们结果 ?

    1.1K30
    领券