修改

Question

我有一个大型产品数据库，我使用jQuery .autocomplete()函数输入搜索。正在按名称或ID搜索产品。当显示包含项目的列表时，用户可以从列表中选择产品，以使用产品ID和其他具有已知预定义值的其他字段填充输入，例如税收＆＃39;或＆＃39; productName＆＃39;。布局是这样的：

HTML代码

<input type="text" id="productID" />
<input type="text" id="productName" />
<input type="text" id="quantity" />
<input type="text" id="taxes" />

... and more relative inputs

<input type="text" id="price" />
<!-- add product to cart -->
<input type="submit" value="Add to cart" />

表单的含义是将产品插入某个商店车，同时手动填充未知或交替的已知字段。

现在的问题是，我通过内存了解了许多产品ID并且可以直接输入，因此我可以快速调整必要的字段并点击“输入”。将产品插入购物车。问题是当我离开.autocomplete()字段时，带有结果的列表会消失，并且不会选择产品。

我的jQuery

var cache = {};
$("#productID").autocomplete({
    minLength: 1,
    autoFocus: true,
    source: function (request, response) {
        var term = request.term; // search-term
        // check if the term is already cached
        if (term in cache) {
            response(cache[ term ]); // return cached result
            return;
        }
        // get results from remote script
        $.getJSON("/autocomplete.php", request, function (data) {
            cache[ term ] = data; // cache the result for this term
            response(data);
        });
    },
    select: function (event, ui) {
        // pre-populate fields of the product
        $("#productName").val(ui.item.name);
        $("#taxes").val(ui.item.taxes);
        $("#price").val(ui.item.price);
    }
};

在这里，我需要等待显示的回复，然后按“TAB＆＃39;选择产品。

有什么方法可以让JSON响应在我“TAB＆＃39;离开现场，并选择列表中的第一项？由于这是非常简单的工作，我不想等待每次选择产品的回复。

修改

感谢@raduation找到解决方案！这是我做的：

// first altered the autocomplete-select to point to a Js-function
var cache = {};
$("#productID").autocomplete({
    minLength: 1,
    autoFocus: true,
    source: function (request, response) {
        var term = request.term; // search-term
        // check if the term is already cached
        if (term in cache) {
            response(cache[ term ]); // return cached result
            return;
        }
        // get results from remote script
        $.getJSON("/autocomplete.php", request, function (data) {
            cache[ term ] = data; // cache the result for this term
            response(data);
        });
    },
    select: function (event, ui) {
        // pre-populate fields of the product
        selectValueAutocomplete(ui.item, $(this));
    }
};

// function to insert item's values in the fields
function selectValueAutocomplete(item, input)
{
    input.val(item.value);
    $("#productName").val(item.name);
    $("#taxes").val(item.taxes);
    $("#price").val(item.price);
}

我添加了Eventlisteners来检查焦点与否时的操作：

$(document)
    .on("focusout", "#productID", function() {
        $(this).addClass("selectFirst");
    })
    .on("focus", "#productID", function() {
        $(this).removeClass("selectFirst");
     }) // Here I invoke the jQuery.autocomplete()'s response event
    .on("autocompleteresponse", "#productID", function( event, ui ) {
        if($(this).hasClass("selectFirst"))
        { // select first item from response
            selectValueAutocomplete(ui.content[0], $(this));
        }
     });

Answer 1

在文本输入字段上添加一个键事件侦听器，用于侦听Tab键。按Tab键后，在文本输入上设置一个属性，表示＆＃34;填充第一个产品匹配＆＃34;。例如：$('#productId').prop('populateFirst',true);

然后，在您的getJSON回调函数中，检查是否存在此属性，并填充第一个产品。完成此操作后（或者如果存在ajax错误），请删除该属性，这样它就不会干扰下次使用自动完成功能。

Answer 2

您是否有理由不在源选项中指定autocomplete.php？

$("#productID").autocomplete({
    minLength: 1,
    autoFocus: true,
    source: "autocomplete.php"
    },
    select: function (event, ui) {
        // pre-populate fields of the product
        $("#productName").val(ui.item.name);
        $("#taxes").val(ui.item.taxes);
        $("#price").val(ui.item.price);
    }
};

修改

见this Fiddle ......它应该有用。
（我模拟了源代码，当然......但应该也一样。）

jQuery自动完成 - 无论JSON结果是否尚未就绪，都填写输入

修改

2 个答案: