javascript - 没有正确显示输入的文本

Question

我正在使用 p:inputTextArea 标签来自动完成代码，因为我正在尝试制作自定义代码编辑器。当我输入和字母时，下拉列表会显示相应的建议。这很好用。但问题是如果我输入“se”，它可能会在下拉列表中显示房子。但是当我选择它时，输出将是“seuse”。单词的前两个字母将替换为用户键入的单词。在这种情况下我该怎么办？以下是我的 XHTML 文件。

<h:form id="formId">
            <p:autoComplete  class="ui-auto" id="text1" value = "#{username.d}" 
                             completeMethod="#{dbConnect.completeArea}" queryDelay="1" minQueryLength="1">
                <f:converter converterId = "www" />
            </p:autoComplete>
            <br></br> 
            <h:commandButton  type="button" value = "submit" action = "t1" onclick="myFunction()"/>

            <br></br> <p:outputLabel for="text1" id="demo"></p:outputLabel> 

        </h:form>
<script type="text/javascript">

        const keywords = {
            IF: {style: "code-elem", indent: 4},
            ENDIF: {style: "code-elem", indent: -4},
            IFLISTING: {style: "code-str", indent: 4},
            ENDIFLISTING: {style: "code-str", indent: -4},
            VAR: {style: "code-comment", indent: 0},
            LISTING: {style: "code-comment", indent: 0}
        };

        function myFunction() {
            let indent = 0;
            document.getElementById('formId:demo').innerHTML = document.getElementById('formId:text1_input').value.split(/[\r\n]+/).map(line => {
                const oldIndent = indent;
                line = line.trim().replace(/###([A-Z]+)(.*?)###/g, (m, keyword, arg) => {
                    const param = keywords[keyword];
                    if (!param)
                        return m;
                    indent += param.indent;
                    return '<span class="' + param.style + '">' + m + '</span>';
                });
                return "&nbsp;".repeat(Math.min(indent, oldIndent)) + line;
            }).join("<br/>");
        }
        window.onload = myFunction;

    </script>

如果这有任何用处，以下也是我的 java 文件。

public List<String> completeArea(String inputName) {
        List<String> result = new ArrayList<>();
        try {
            Class.forName("com.mysql.jdbc.Driver");
            String query1 = "select name from labels where name like ? order by name";
            try (Connection con = DriverManager.getConnection("jdbc:mysql://localhost/company", "root", "");
                    PreparedStatement pst = con.prepareStatement(query1)) {
                pst.setString(1,"%" + inputName + "%");
                try (ResultSet rs = pst.executeQuery()) {

                    while (rs.next()) {
                        result.add(rs.getString(1));
                    }
                }
            }
        } catch (Exception ex) {
            System.out.println("error occured" + ex);
        }

        return result;
    }

我已将我的问题编辑为@selaron 所说的 p:autoComplete 不会解决我的问题。

标签： javascriptjavajsfprimefacesautocomplete