單個文本框元素中的多個字體屬性

Question

我想有一個輸入類型的文本框，在鍵入時可以觀察用戶的輸入，並在文本框下方的列表框中提供他/她的建議。 當用戶通過單擊選擇輸入時，該文本必須附加在主文本框中。 到目前為止，我已經實現了編寫代碼以觀察鍵入的代碼（通過使用onchange javascript事件）並在列表框上提供了建議。 但是我不明白如何在具有不同字體屬性的主文本框中添加所選建議。 可以實現嗎？ 最歡迎任何提示或插件詳細信息。

添加示例代碼。 我希望它能簡要說明我想要實現的目標。

<script>
    function changeValue(){
        var myval = document.getElementById("mytextbox").value;
        var newval = "green text";
        document.getElementById("mytextbox").value = myval + newval.fontcolor("green")";
    }
</script>

<input type="textbox" id="mytextbox" value="small text " />
<input type="button" value="click me" onclick="changeValue()">

單擊按鈕時，文本框中的文本應附加綠色文本和綠色。 但這只是在文本框中顯示為

"small text <font color="green">green text</font>"

希望如此是可以實現的。

Answer 1

如果我正確理解，則需要某種自動完成功能，對嗎？

我認為jQuery UI可以幫助您實現這一目標。 檢查此鏈接：

http://jqueryui.com/autocomplete/

問候！

Answer 2

設置textbox的value是一個全有還是全無的主張。 您不能將樣式的一部分獨立於其余部分。

一種解決方法是避免使用textbox元素，而是使用div包含建議的文本。 您可以使用.innerHTML屬性（或jQuery中的.html()函數）更新div內的HTML，包括所需的任何span元素或內聯樣式。

就像是：

<script>
    function changeValue(){
    var myval = document.getElementById("mytextbox").innerHTML;
    var newval = "green text";
    document.getElementById("mytextbox").innerHTML = myval + newval.fontcolor("green");
    }
</script>

<div id="mytextbox"/>small text</div>
<input type="button" value="click me" onclick="changeValue()">

如果您還想對mytextbox的內容進行mytextbox （例如，將其作為表單的一部分提交），則必須編寫一些JS以稍后（或同時）驗證並將數據傳輸到適當的（也許是隱藏的）表單字段或AJAX數據結構。