基于建议的动态查询构建器二次迭代匹配异常问题

我开发了一个基于建议的查询构建器，创建了名为suggestion的二维数组，包含4个元素：

var field = []; // 从服务器获取的预定义键值对数组，仅提取key
var assignmentOp = [ "=", "!=", ">", "<",">=", "<=" ];
var values = [ "text", "date" ];
var logicalOp = [ "AND", "OR" ];

这些值会在onfocus()触发时作为建议展示，通过调用suggestion()函数，结合currentElementIndex标志位（选择建议时递增）在页面的textarea中插入对应内容。

问题描述 #

首次循环时函数运行正常，但第二次迭代时，遍历完suggestion的4个元素后回到currentElementIndex = 0（即field类别），此时field的建议匹配会读取textarea中的整个字符串，而我需要它仅读取最后输入的单个字符来搜索匹配的建议项。

已实现代码 #

showSuggestion() 函数

function showSuggestion() {
        console.log("Inside showSuggestion:");
        console.log(currentElementIndex);

        if (event.which === 8) { // 退格键ASCII码
            console.log("Clearing");
            if (currentElementIndex >= 0) {
                currentElementIndex--;
                console.log(
                        "after Decrementing the CurrentElementIndex Value:",
                        currentElementIndex);
            }
            if (textarea.includes(" ")) {
                var lastIndex = textarea.lastIndexOf(" ");
                textarea = textarea.substring(0, lastIndex);
                console.log("Textarea Text:", textarea);
            } else {
                // 文本框无空格时清空全部内容
                textarea = "";
                console.log("Textarea is empty.");
            }
        }
        // field类别处理
        var currentCategory = suggestion[currentElementIndex];
        console.log("currentCategory 1 :", currentCategory);
        if (currentCategory == field) {
            console.log("its field");
            var element = [];
            console.log("suggestion :", suggestion);
            console.log("Field:length :", suggestion[0].length);
            for (var i = 0; i < suggestion[0].length; i++) {
                element.push(suggestion[0][i].key);
            }
            console.log("element :", element);

            var allSuggestions = element;
            var matchingSuggestions = allSuggestions;

            // 获取输入的最后一个字符
            var searchText = event.target.value.slice(-1);
            console.log("searchText :", searchText);
            // 过滤匹配的建议
            if (searchText) {
                matchingSuggestions = allSuggestions
                        .filter(function(suggestion) {
                            return suggestion.toLowerCase().includes(
                                    searchText.toLowerCase());
                        });
            }
            var cursorPosition = textarea[0].selectionEnd;
            console.log("cursorPosition :", cursorPosition);

            console.log("matchingSuggestions :", matchingSuggestions.key);
            // 清空现有建议列表
            suggestionList.empty();
            if (matchingSuggestions.length > 0) {
                matchingSuggestions.forEach(function(suggestions) {
                    // 创建建议列表项
                    var listItem = $("<li>").text(suggestions);
                    // 点击插入建议并递增索引
                    listItem.on("click",
                            function() {
                                replaceWithSuggestions(textarea, searchText,
                                        suggestion)
                                currentElementIndex++;
                            });
                    // 添加到建议列表
                    suggestionList.append(listItem);
                });
                // 显示建议框
                suggestionsDiv.css("display", "block");
            } else {
                // 无匹配项时隐藏建议框
                suggestionsDiv.css("display", "none");
            }
        }
        // assignmentOp类别处理
        console.log("currentCategory 2 :", currentCategory);
        if (currentCategory == assignmentOp) {
            console.log("its assignmentOp");
            var element = [];
            console.log("suggestion :", suggestion);
            console.log("Field:length :", suggestion[1].length);
            for (var i = 0; i < suggestion[1].length; i++) {
                element.push(suggestion[1][i]);
            }
            console.log("element :", element);
            // 清空现有建议列表
            suggestionList.empty();
            if (element.length > 0) {
                element.forEach(function(suggestions) {
                    console.log("suggestions in the matching suggestion :",
                            suggestions);
                    // 创建建议列表项
                    var listItem = $("<li>").text(suggestions);
                    console.log("listItem :", listItem.text());
                    // 点击插入建议并递增索引
                    listItem.on("click", function() {
                        insertSuggestion(suggestions);
                        currentElementIndex++;
                    });
                    // 添加到建议列表
                    suggestionList.append(listItem);
                });
                console.log("suggestionList:" + suggestionList);
                // 显示建议框
                suggestionsDiv.css("display", "block");
            } else {
                // 无匹配项时隐藏建议框
                suggestionsDiv.css("display", "none");
            }
        }
        // values类别处理
        console.log("currentCategory 3 :", currentCategory);
        if (currentCategory == values) {
            console.log("its values");
            var element = [];
            console.log("suggestion :", suggestion);
            console.log("Field:length :", suggestion[2].length);
            for (var i = 0; i < suggestion[2].length; i++) {
                element.push(suggestion[2][i]);
            }
            console.log("element :", element);
            // 清空现有建议列表
            suggestionList.empty();
            if (element.length > 0) {
                element.forEach(function(suggestions) {
                    console.log("suggestions in the matching suggestion :",
                            suggestions);
                    // 创建建议列表项
                    var listItem = $("<li>").text(suggestions);
                    console.log("listItem :", listItem.text());
                    // 点击插入建议并递增索引
                    listItem.on("click", function() {
                        insertSuggestion(suggestions);
                        currentElementIndex++;
                    });
                    // 添加到建议列表
                    suggestionList.append(listItem);
                });
                console.log("suggestionList:" + suggestionList);
                // 显示建议框
                suggestionsDiv.css("display", "block");
            } else {
                // 无匹配项时隐藏建议框
                suggestionsDiv.css("display", "none");
            }
        }

        // logicalOp类别处理
        console.log("currentCategory 4 :", currentCategory);
        if (currentCategory == logicalOp) {
            console.log("its logicalOp");
            var element = [];
            console.log("suggestion :", suggestion);
            console.log("Field:length :", suggestion[3].length);
            for (var i = 0; i < suggestion[3].length; i++) {
                element.push(suggestion[3][i]);
            }
            console.log("element :", element);
            // 获取文本框内容
            var searchText = textarea.val();
            // 清空现有建议列表
            suggestionList.empty();
            if (element.length > 0) {
                element.forEach(function(suggestions) {
                    console.log("suggestions in the matching suggestion :",
                            suggestions);
                    // 创建建议列表项
                    var listItem = $("<li>").text(suggestions);
                    console.log("listItem :", listItem.text());
                    // 点击插入建议并重置索引为0
                    listItem.on("click", function() {
                        insertSuggestion(suggestions);
                        currentElementIndex = 0;
                    });
                    // 添加到建议列表
                    suggestionList.append(listItem);
                });
                // 显示建议框
                suggestionsDiv.css("display", "block");
            } else {
                // 无匹配项时隐藏建议框
                suggestionsDiv.css("display", "none");
            }
        }
    }

insertSuggestion() 函数

// 插入建议的函数
function insertSuggestion(suggestion) {
    // 获取文本框当前内容
    var currentText = textarea.val();
    console.log("current text in the textarea:", currentText.substring(0,
            cursorPosition));
    // 获取当前光标位置
    var cursorPosition = textarea[0].selectionStart;
    console.log("cursorPosition :", cursorPosition);
    var newText = currentText.substring(0, cursorPosition) + suggestion
            + " ";
    console.log(textarea.val().substring(textarea[0].selectionEnd));
    console.log("newText :", newText);
    // 设置文本框新内容
    textarea.val(newText);
    // 隐藏建议列表
    suggestionsDiv.css("display", "none");
}

内容的提问来源于stack exchange，提问作者CypherBee