jQueryUI自动完成 – 当没有返回结果时

我想知道当使用jQueryUI自动完成时从服务器返回空结果时如何捕获并添加自定义处理程序。

关于这一点似乎有一些与各种jQuery插件相关的问题（例如， 当结果为空时，jQuery自动完成显示“无数据”错误消息 ），但我想知道是否有更好/更简单的方法来实现与jQueryUI相同的自动完成。

在我看来，这是一个常见的用例，我想也许jQueryUI通过添加干净地处理这种情况的能力改进了jQuery自动完成。 然而，我无法找到这种function的文档，在我破解它之前，我想抛弃一些触角，以防其他人以前见过这个。

虽然可能不是特别有影响力，但我可以让服务器返回任何内容 – 例如HTTP 204: No Content到200 / JSON空列表 – 无论是什么使得最容易在jQueryUI的自动完成中捕获结果。

我的第一个想法是根据文档传递一个带有两个参数的回调，即一个请求对象和一个response callback来处理代码：

第三种变体即回调提供了最大的灵活性，可用于将任何数据源连接到自动完成。 回调有两个参数：

一个请求对象，具有一个名为“term”的属性，它引用当前文本输入中的值。 例如，当用户在城市字段中输入“new yo”时，自动完成术语将等于“new yo”。

一个响应回调，它期望一个参数包含要向用户建议的数据。 应根据提供的术语过滤此数据，并且可以采用上述任何简单本地数据格式（String-Array或具有标签/值/两者属性的Object-Array）。

当响应回调没有收到数据时，它会插入一个特殊的单行对象数组，该对象数组有一个标签和一个没有数据的指示符（因此select / focus将其识别为无数据返回的指示符）。

这似乎过于复杂。 我更喜欢能够使用一个源：“http：// …”，只是在某个地方有一个回调，表明没有返回数据。

谢谢你的阅读。

布赖恩

编辑：

这是我为解决这个问题而创建的包装函数，基于@ ThiefMaster的保证，它是正确的方法：

  function autocomplete(input, source_url, on_select, on_focus, default_data) { /* Autocompletion for an input field * input: the field for autocompleting * source_url: the JSON url for getting data * on_select: function (event,ui) - when someone selects an element * on_focus: function (event, ui) - when someone focuses an element * default_data: function () returning default data; alternatively is the * default dataset eg {'label':'X','value':'Y'} */ $(input).autocomplete({ source: function (request, response) { $.ajax({ url: source_url, dataType: "json", data: request, success: function (data) { if (!data.length) { // expect [] or "" var def_data = typeof(default_data) == 'function' ? default_data() : default_data; response(def_data); } else { response(data); } } }); }, minLength: 3, select: on_select, focus: on_focus, }); } 

Answer 1

覆盖自动完成对象的response函数可能有效，但这是monkeypatching。 使用响应回调很可能是实现所需内容的最简洁方法。

Answer 2

使用response选项很容易处理

 $( 'input.Srch' ).autocomplete({ minLength: 3, ....... response: function(event, ui) { if (!ui.content.length) { var noResult = { value:"",label:"No results found" }; ui.content.push(noResult); } } }); 

这是我的截图：

Answer 3

将源代码视为php脚本：

我在我的代码中做了什么是我从PHP脚本返回没有结果消息

 $ArrayMe = Array(); if(rows found){ array_push( $ArrayMe ,array('key1'=> $val1, 'key2'=> $val2, 'key3'=> $val3)); } else { array_push( $ArrayMe ,array("message"=>"No results found" )); } echo json_encode($ArrayMe); 

来自jquery：

  $( "input#val1" ).autocomplete({ minLength: 2, source:function (request, response) { $.ajax({ type: 'get', url: "path/to/phpscript.php", dataType: "json", data: { term: request.term }, success: function(data) { response($.map(data, function (value) { if(value.message){ console.log(value.message); $('p#val2').html(""); $('p#val3').html(""); return {Message: value.message} } else { return { key1: value.val1, key2: value.val2, key3: value.val3 } } })); } }); }, focus: function( event, ui ) { $( "input#val1" ).val( ui.item.val1); $( "p#val2" ).html( ui.item.val2); $( "p#val2" ).html( ui.item.val3); return false; }, select: function( event, ui ) { $( "input#val1" ).val( ui.item.val1); $( "p#val2" ).html( ui.item.val2); $( "p#val3" ).html( ui.item.val3); return false; } }).autocomplete( "instance" )._renderItem = function( ul, item ) { if(item.Message){ return $( "
" ) .append( "
" + item.Message +"
" ) .appendTo( ul ); } else{ return $( "
" ) .append( "
" + item.val1+ " | " + item.val2+ " | " + item.val3+"
" ) .appendTo( ul ); } }; 

。 它对我来说非常好。

如果没有数据获取消息以及触发必填字段。

我的解释很差，所以我发布了整个代码以使其更容易。