栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

在jQuery UI自动完成功能上未检测到任何结果

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

在jQuery UI自动完成功能上未检测到任何结果

jQueryUI 1.9

jQueryUI 1.9通过

response
事件为自动完成小部件提供了祝福,我们可以利用该事件来检测是否未返回任何结果:

搜索完成后触发,然后显示菜单。对于本地处理建议数据很有用,因为不需要自定义源选项回调。即使没有显示菜单,因为没有结果或自动完成功能被禁用,即使搜索结束,该事件也会始终触发。

因此,考虑到这一点,我们在jQueryUI 1.8中不得不做的黑客被替换为:

$(function() {    $("input").autocomplete({        source: ,        response: function(event, ui) { // ui.content is the array that's about to be sent to the response callback. if (ui.content.length === 0) {     $("#empty-message").text("No results found"); } else {     $("#empty-message").empty(); }        }    });});​

示例: http
//jsfiddle.net/andrewwhitaker/x5q6Q/


jQueryUI 1.8

我找不到使用jQueryUI
API做到这一点的简单方法,但是,您可以

autocomplete._response
使用自己的函数替换该函数,然后调用默认的jQueryUI函数(
已更新以扩展自动完成
prototype
对象)

var __response = $.ui.autocomplete.prototype._response;$.ui.autocomplete.prototype._response = function(content) {    __response.apply(this, [content]);    this.element.trigger("autocompletesearchcomplete", [content]);};

然后将事件处理程序绑定到

autocompletesearchcomplete
事件(内容是搜索的结果,一个数组):

$("input").bind("autocompletesearchcomplete", function(event, contents) {    $("#results").html(contents.length);});

这是在将自动完成

response
功能保存到变量(
__response
),然后
apply
用于再次调用它。我无法想象此方法会产生任何不良影响,因为您正在调用默认方法。由于我们正在修改对象的原型,因此这将适用于所有自动完成的小部件。

这是一个工作示例 :http :
//jsfiddle.net/andrewwhitaker/VEhyV/

我的示例使用本地数组作为数据源,但我认为这并不重要。


更新: 您还可以将新功能包装在其自己的小部件中,以扩展默认的自动完成功能:

$.widget("ui.customautocomplete", $.extend({}, $.ui.autocomplete.prototype, {  _response: function(contents){      $.ui.autocomplete.prototype._response.apply(this, arguments);      $(this.element).trigger("autocompletesearchcomplete", [contents]);  }}));

将通话从更改

.autocomplete({...});
为:

$("input").customautocomplete({..});

然后绑定到自定义

autocompletesearchcomplete
事件:

$("input").bind("autocompletesearchcomplete", function(event, contents) {    $("#results").html(contents.length);});

在这里查看示例 :http :
//jsfiddle.net/andrewwhitaker/VBTGJ/


既然这个问题/答案已经引起了人们的关注,我想我会用另一种方法来完成此问题的更新。当页面上只有 一个
自动完成窗口小部件时,此方法最有用。可以将这种方式应用于使用远程或本地源的自动完成小部件:

var src = [...];$("#auto").autocomplete({    source: function (request, response) {        var results = $.ui.autocomplete.filter(src, request.term);        if (!results.length) { $("#no-results").text("No results found!");        } else { $("#no-results").empty();        }        response(results);    }});

在里面

if
,您可以放置​​自定义逻辑以在未检测到结果时执行。

示例: http
//jsfiddle.net/qz29K/

如果您使用的是远程数据源,请说出以下内容:

$("#auto").autocomplete({    source: "my_remote_src"});

然后,您需要更改代码,以便自己进行AJAX调用,并可以检测到何时返回0结果:

$("#auto").autocomplete({    source: function (request, response) {        $.ajax({ url: "my_remote_src",  data: request, success: function (data) {     response(data);     if (data.length === 0) {         // Do logic for empty result.     } }, error: function () {     response([]); }        });    }});


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/403946.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号