jQuery UI的自动完成功能显示了早期的文本响应 [英] Jquery UI Autocomplete Shows Response for Earlier Text

问题描述

我使用jQuery自动完成。如果用户类型2个字符，然后等待，然后另一个类型。如果第一个响应来自第二后，会短暂显示第二个列表然后显示一个列表。我怎样才能取消第一个请求的用户开始输入更长时间后？

  $（＃城）。自动完成（{
        来源：函数（请求，响应）{
            $阿贾克斯（{
                网址：/geo/json_autocomplete.php
                数据类型：JSON
                数据：{
                    长期：$（＃城）VAL（）。
                    countryid：$（＃countryid）VAL（）
                }，
                成功：功能（数据）{
                    响应（$ .MAP（数据，功能（项目）{
                        //console.debug(item.value++ item.label ++ item.id）;
                        返回{
                            标签：item.label，
                            值：item.value，
                            ID：item.id
                        }
                    }））;
                }
            }）;
        }，
        的minLength：2，
        延迟：500，
        选择：函数（事件，UI）{
            $（＃cityid）VAL（ui.item.id）。
            showForm（）;
        }
    }）;
 

解决方案

您可以尝试存放在变量的XHR并与 XHR 参数与您在得到AJAX成功回调。只调用如果两者匹配则响应函数。您也可以accoringly调节延时的参数。

  VAR lastXhr;$（＃城）。自动完成（{
    延迟：500，//请求之间的500毫秒。
    来源：函数（请求，响应）{
        lastXhr = $阿贾克斯（{
            网址：/geo/json_autocomplete.php
            数据类型：JSON
            数据：{
                长期：$（＃城）VAL（）。
                countryid：$（＃countryid）VAL（）
            }，
            成功：功能（数据，状态XHR）{
                如果（XHR === lastXhr）{
                     响应（$ .MAP（数据，功能（项目）{
                    //console.debug(item.value++ item.label ++ item.id）;
                        返回{
                            标签：item.label，
                            值：item.value，
                            ID：item.id
                        };
                    }））;
                }
            }
        }）;
    }，
    的minLength：2，
    延迟：500，
    选择：函数（事件，UI）{
        $（＃cityid）VAL（ui.item.id）。
        showForm（）;
    }
}）;
 

I'm using Jquery autocomplete. If a user types 2 characters then waits, then types another. If the first response comes after the second, it will briefly show the second list then show the first list. How can I cancel the first request after a user starts typing more?

    $("#city").autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "/geo/json_autocomplete.php",
                dataType: "json",
                data: {
                    term: $("#city").val(),
                    countryid: $("#countryid").val()
                },
                success: function( data ) {
                    response( $.map( data, function( item ) {
                        //console.debug(item.value+" "+item.label+" "+item.id);
                        return {
                            label: item.label,
                            value: item.value,
                            id: item.id
                        }
                    }));
                }
            });
        },
        minLength: 2,
        delay: 500,
        select: function( event, ui ) {
            $("#cityid").val(ui.item.id);
            showForm();
        }
    });

解决方案

You could try storing the xhr in a variable and comparing it with the xhr parameter you get in the AJAX success callback. Only call the response function if the two match. You can also adjust the "delay" parameter accoringly.

var lastXhr;

$("#city").autocomplete({
    delay: 500, // 500ms between requests.
    source: function( request, response ) {
        lastXhr = $.ajax({
            url: "/geo/json_autocomplete.php",
            dataType: "json",
            data: {
                term: $("#city").val(),
                countryid: $("#countryid").val()
            },
            success: function( data, status, xhr ) { 
                if (xhr === lastXhr) {
                     response( $.map( data, function( item ) {
                    //console.debug(item.value+" "+item.label+" "+item.id);
                        return {
                            label: item.label,
                            value: item.value,
                            id: item.id
                        };
                    }));
                }
            }
        });
    },
    minLength: 2,
    delay: 500,
    select: function( event, ui ) {
        $("#cityid").val(ui.item.id);
        showForm();
    }
});

这篇关于jQuery UI的自动完成功能显示了早期的文本响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！