如果没有返回任何内容,则jQuery自动填充删除字符

时间:2017-12-02 17:33:08

标签: javascript php jquery jquery-ui autocomplete

我正在使用jQuery UI自动完成功能在表单中远程填充文本输入。我有所有流畅的信息并正确返回但是想做一些事情来更好地增强ui而不是验证输入后填充。目前它是用PHP动态编写的,然后在前面使用。所以...

$js .= "$( function(){";
$js .= "$('#" . $config->settings['field_name'] . "_" . $suggestiveFieldArray . "').autocomplete({";
$js .= "source: function( request, response ){";
$js .= "$.ajax({";
$js .= "url: '" . $thisURL . "',";
$js .= "dataType: 'jsonp',";
$js .= "data: {";
$js .= "term: request.term,";
$js .= "dependents: '". $thisVAR . "',";
$js .= "field: '". $config->settings['field_name'] . "_" . $suggestiveFieldArray . "',";
$js .= "fieldSettings: " . json_encode($fieldSettings);
$js .= "},";
$js .= "success: function( data ) {";
$js .= "response( data );";
$js .= "},";
$js .= "minLength: 0";
$js .= "});";
$js .= "}";
$js .= "});";
$js .= "});";

将是:

$( function(){
    $('#" . $config->settings['field_name'] . "_" . $suggestiveFieldArray . "').autocomplete({
        source: function( request, response ){
            $.ajax({
                url: '" . $thisURL . "',
                dataType: 'jsonp',
                data: {
                    term: request.term,
                    dependents: '". $thisVAR . "',
                    field: '". $config->settings['field_name'] . "_" . $suggestiveFieldArray . "',
                    fieldSettings: " . json_encode($fieldSettings)
                },
                success: function( data ) {
                    response( data );
                },
                minLength: 0";
            });
        }
    });
});

在后端我(简而言之)返回以下内容:

array( "id" => $row['name'] . '-' . $row['code'], "label" => $row['name'], "value" => $row['name'] );

我想要做的是在输入字段的标签中触发隐藏的错误消息字段并删除刚刚触发的密钥,从而不允许他们输入无效数据并让他们知道原因。

我提供的返回数据已在后端验证。因此,如果没有提供任何建议,则输入无效。

我已经尝试了各种方法来检查数据,并使用jQuery UI API中的一些方法和事件进行了播放,但到目前为止还没有做到。

是否有一种方法可以调用或事件在返回时捕获,我可以检查数据中的信息?如果是这样,我将如何删除键控数据?

*编辑*

根据@miknik请求......

当'E'输入字段并且有可用位置而不可用时。

有效数据=(通过控制台XHR预览)

jQuery213038349144725773976_1512237603485([{id: "Eakly-OK", label: "Eakly", value: "Eakly"}, {id: "Edmond-OK", label: "Edmond", value: "Edmond"},…]);
0:{id: "Eakly-OK", label: "Eakly", value: "Eakly"}
1:{id: "Edmond-OK", label: "Edmond", value: "Edmond"}
2:{id: "El Reno-OK", label: "El Reno", value: "El Reno"}
3:{id: "Elk City-OK", label: "Elk City", value: "Elk City"}
4:{id: "Enid-OK", label: "Enid", value: "Enid"}
5:{id: "Eufaula-OK", label: "Eufaula", value: "Eufaula"}

无效数据:

jQuery2130021538268901126534_1512237746135([]);
No properties

1 个答案:

答案 0 :(得分:0)

定义一个全局变量来保存文本框的最后一个输入,我将其称为goodText

将keydown事件处理程序绑定到文本框以设置变量的值,或将其设置为ajax调用的success函数的一部分。

修改您的成功函数以检查数据响应,并根据返回的响应数量得出if / else条件

if (!data || !Object.keys(data).length)

如果为空,请插入代码以显示所需的任何错误消息,然后将文本框的值恢复为最后一个良好值:

$('#textInput').val(goodText);

否则,当他们得到一个好的回复时,做你做的任何事情,如果你想以这种方式更新,请在此处添加代码来设置goodText

您可能希望延迟自动填充,直到他们输入了几个字符