input textのdatalistで特殊文字 Ω(uncode U+02126)を表示したい

Question

input textのdatalistで特殊文字　mΩ(ΩのuncodeはU+02126)を表示したいですが、うまくいかなくて困っています。

表示はGrid上ですが、ただのinput textのautocomplateのdatalistです。

htmlコード&#8486を使用した場合は、ω(オメガ)となりました。

Google Chromeを利用しています。

どなたかご教授お願いします。

let datalist = document.createElement("datalist");
const tempUnits = [{id: 1, text: "mΩ"}];

tempUnits.forEach((currentValue) => {
    let option = document.createElement("option");
    option["data-value"] = currentValue.id;

    if (currentValue.text === "mΩ") {
        option["value"] = "m&#x(U+02126)"; // m&#x(U+02126)だとそのまま表示されてしまった。
    }

    // datalistに追加するようなことをしている。
    // this.eInput1.appendChild(datalist);
});

(追記)
この質問で記載しましたのはΩ(U+03A9)のオームのほうです、ᴎのほうになっていると思います。
javascript側で機種依存文字の　Ω(U+2126)　を使用するとうまくいきます。
以下は実際に使用しているコードです。

// C#ですが、ただのEnum値です。
using System.ComponentModel.DataAnnotations;

namespace DomainModel {
    public enum UnitEnum {
        [Display(Name = "mΩ")] // Ω(U+003A9)を使用
        Mohm = 1
    }
}

// ag-gridのcomponentで　 input type="text" autocomplateとそのdatalistを作成してます。
function getSelectUnits() {
    function SelectUnits() { }

    SelectUnits.prototype.init = (params) => {
        this.params = params;

        this.eInput1 = document.createElement("input");
        this.eInput1.value = params.value;
        this.eInput1.classList.add("ag-input1");

        this.eInput1.autocomplete = "on";
        this.eInput1.placeholder = "-- 選択 --";
        this.eInput1.setAttribute("list", "selectUnits");

        this.eInput1.style.width = "100%";
    };

    SelectUnits.prototype.getGui = () => {
        return this.eInput1;
    };

    SelectUnits.prototype.afterGuiAttached = () => {
        if ("cellEditorParams" in this.params.colDef) {
            let datalist = document.createElement("datalist");
            datalist.id = "selectUnits";

            const units = this.params.colDef.cellEditorParams;
            const unit = this.eInput1.value;
            this.tempUnits = getSelectFilterData(units, "key", "value", unit);　// [{ id: 1, text: "Ω" }, { id: 2, text: "Ω" } ]みたいなこと。

            if (this.tempUnits) {
                this.tempUnits.forEach((currentValue) => {
                    let option = document.createElement("option");
                    option["data-value"] = currentValue.id;
                               
                    // datalistへの追加処理 
                    // Ω(U+003A9) → Ω(U+02126)※機種依存文字　変換
                    let value = currentValue.text.toString().replace(/Ω/, "\u{02126}");
                    option["value"] = value;

                    datalist.appendChild(option);
                });

                this.eInput1.appendChild(datalist);
            }
 
            // 既にGridにデータがある場合
            // Ω(U+003A9) → Ω(U+02126)※機種依存文字　変換
            let value2 = this.eInput1.value.toString().replace(/Ω/, "\u{02126}");
            this.eInput1.value = value2;
        }
    };

    SelectUnits.prototype.getValue = () => {
        // datalistで選択した値をΩ(U+003A9)に変換する　※GridはΩ(U+003A9)の表示の影響を受けなかった。 
        // Ω(U+02126)※機種依存文字 → Ω(U+003A9)変換
        let value = this.eInput1.value.toString().replace(/Ω/, "\u{003A9}");
        this.eInput1.value = value;
        return this.eInput1.value;
    };

    SelectUnits.prototype.destory = () => {
        // console.log("destory");
    };

    return SelectUnits;
}

Comments

[maisumakun]

「そのままソースコードにΩを書いておく」、ではだめなのでしょうか？

[退会済みユーザー]

コメントありがとうございます。
Ωをdatalistにそのまま書くと　”N"の反対向きの文字に変換されました。

[maisumakun]

ブラウザ環境は何ですか？

[退会済みユーザー]

情報不足すみません。Google Chromeを利用しています。

[退会済みユーザー]

htmlコード&#8486を使用した場合は、ω(オメガ)となりました。

[maisumakun]

Google Chromeで直接「Ω」を書いてみましたが、再現しません。

https://jsfiddle.net/ct0z3x26/

[退会済みユーザー]

再現した画面を追加させていただきました。
表示はGrid上ですが、ただのinput textのautocomplateのdatalistです。

[ikadzuchi]

いくつか疑問があります。
> mΩ(ΩのuncodeはU+02126)
Ω(U+03A9)とΩ(U+2126)は別字です。ここで疑問なのですが、
> Ωをdatalistにそのまま書くと　”N"の反対向きの文字に変換されました。
ここで書いたものはΩ(U+03A9)とΩ(U+2126)どちらですか?
なお化けた文字はᴎかиに見えますが、どちらにせよ原因が分からず不可解です。
> &#8486を使用した場合は、ω(オメガ)となりました。
本当に小文字のオメガになったのでしょうか。だとすると書かれていない部分のコードで変換が掛かっていることになります。コード全体を示してください。
> m&#x(U+02126)だとそのまま表示されてしまった。
そのように書こうとしたのはなぜでしょうか。何かの情報を見たならそれを示してください。
&#x02126の間違いではないかと思うのですが。

[退会済みユーザー]

質問文のほうに追記させていただきました。

ここで書いたものはΩ(U+03A9)のほうです。ᴎになりました。
オメガとオームが同じなのか違うのかよくわかっていないので検証してみようと思います。

ご指摘のとおり、変換処理的なことをしていたのですが、最初からΩ(U+2126)にしていたら変換はいらないのかもしれません。これもまだ検証できていませんが。

m&#x(U+02126)を使ったのは、javascriptでunicodeの表示方法をわかっていなかったことです。

そのため、ベストアンサーでご回答いただいた　option["value"] = "\u{02126}"　の方法を使ったらうまくいったということです。

[退会済みユーザー]

質問の追記したコードを修正しました。

Ω(U+03A9)⇔Ω(U+2126)　の変換についてコード中に追記しました。

サーバー側は機種依存でないほうのΩ(U+03A9)を格納してあげたいです。
※ここではid/textとしているが、idは使わずそのままtextを格納してます。

となるとサーバー側で機種依存文字を使いたくない時、datalistへの表示時にΩ(U+2126)に変換してあげる必要があるのかなと考えましたが、他に何か良い方法はありますでしょうか？

Windows環境での使用予定ではありますが。

現在は変換処理をして使用しています。

[ikadzuchi]

やはり小文字ωが出てくるようなコードには見えませんね。
謎は残りますが一応解決済みですし深入りは避けておきます。

Answer 1

option["value"] = "\u{02126}" ではどうですか？

Comments

[退会済みユーザー]

コメントありがとうございます。
\u{02126}で解決することができました。
ベストアンサーとさせていただきます。