Javascript createElement函数不适用于MAC Safari

我有以下代码创建下拉列表：

下面是要呈现的HTML代码下拉列表：

<input class="form-control selectedTextBox mobile-space" list="rider" type="text" id="ridername" placeholder="FirstName LastName"
    data-bind="trimedValue: item().Name, datalist: {
        options: app.viewModel.riderProfiles(),
        optionsValue: 'Id',
        optionsText: 'Name',
        value: app.viewModel.selectedRiderId
    }" />

下面是Knockout.js处理程序：

ko.bindingHandlers.datalist = (function () {
    function getVal(rawItem, prop) {
        var item = ko.unwrap(rawItem);
        return item && prop ? ko.unwrap(item[prop]) : item;
    }

    function findItem(options, prop, ref) {
        return ko.utils.arrayFirst(options, function (item) {
            return ref === getVal(item, prop);
        });
    }
    return {
        init: function (element, valueAccessor, allBindingsAccessor) {
            var setup = valueAccessor(),
                textProperty = ko.unwrap(setup.optionsText),
                valueProperty = ko.unwrap(setup.optionsValue),
                dataItems = ko.unwrap(setup.options),
                myValue = setup.value,
                koValue = allBindingsAccessor().value,
                datalist = document.createElement("DATALIST");

            // create an associated <datalist> element
            datalist.id = element.getAttribute("list");
            document.body.appendChild(datalist);

            // when the value is changed, write to the associated myValue observable
            function onNewValue(newVal) {
                var dataItems = ko.unwrap(setup.options),
                    selectedItem = findItem(dataItems, textProperty, newVal),
                    newValue = selectedItem ? getVal(selectedItem, valueProperty) : void 0;

                if (ko.isWriteableObservable(myValue)) {
                    myValue(newValue);
                }
            }

            // listen for value changes
            // - either via KO's value binding (preferred) or the change event
            if (ko.isSubscribable(koValue)) {
                koValue.subscribe(onNewValue);
            } else {
                ko.utils.registerEventHandler(element, "change", function () {
                    onNewValue(this.value);
                });
            }

            // init the element's value
            // - either via the myValue observable (preferred) or KO's value binding
            if (ko.isObservable(myValue) && myValue()) {
                element.value = getVal(findItem(dataItems, valueProperty, myValue()), textProperty);
            } else if (ko.isObservable(koValue) && koValue()) {
                onNewValue(koValue());
            }
        },
        update: function (element, valueAccessor) {
            var setup = valueAccessor(),
                datalist = element.list,
                dataItems = ko.unwrap(setup.options),
                textProperty = ko.unwrap(setup.optionsText);

            // rebuild list of options when an underlying observable changes
            datalist.innerHTML = "";
            ko.utils.arrayForEach(dataItems, function (item) {
                var option = document.createElement("OPTION");
                option.value = getVal(item, textProperty);
                datalist.appendChild(option);
            });
            ko.utils.triggerEvent(element, "change");
        }
    };})();

ko.bindingHandlers.datalist=（函数（）{
函数getVal（rawItem，prop）{
var项目=ko.展开（原始项目）；
返回项目和道具？打开（项目[道具]）：项目；
}
函数findItem（选项、道具、参考）{
return ko.utils.arrayFirst（选项、函数（项）{
return ref==getVal（项目、道具）；
});
}
返回{
init:function（元素、valueAccessor、allBindingsAccessor）{
var setup=valueAccessor（），
textProperty=ko.unwrap（setup.options文本），
valueProperty=ko.unwrap（setup.optionsValue），
dataItems=ko.unwrap（setup.options），
myValue=setup.value，
koValue=allBindingsAccessor（）.value，
datalist=document.createElement（“datalist”）；
//创建关联的元素
datalist.id=element.getAttribute（“列表”）；
document.body.appendChild（数据列表）；
//当值更改时，写入关联的myValue observable
函数onNewValue（newVal）{
var dataItems=ko.unwrap（setup.options），
selectedItem=findItem（数据项、文本属性、新值），
newValue=selectedItem？getVal（selectedItem，valueProperty）：无效0；
if（ko.isWriteableObservable（myValue））{
myValue（新值）；
}
}
//倾听价值观的变化
//-通过KO的值绑定（首选）或变更事件
if（可发行的ko（koValue））{
koValue.subscribe（onNewValue）；
}否则{
gisterEventHandler（元素，“change”，函数（）{
onNewValue（此.value）；
});
}
//初始化元素的值
//-通过myValue observable（首选）或KO的值绑定
if（ko.isObservable（myValue）和&myValue（））{
element.value=getVal（findItem（数据项，valueProperty，myValue（）），textProperty）；
}else if（ko.isoservable（koValue）&&koValue（））{
onNewValue（koValue（））；
}
},
更新：函数（元素、值访问器）{
var setup=valueAccessor（），
datalist=element.list，
dataItems=ko.unwrap（setup.options），
textProperty=ko.unwrap（setup.options文本）；
//当基础可观察到的更改时重新生成选项列表
datalist.innerHTML=“”；
ko.utils.arrayForEach（数据项、函数（项）{
var option=document.createElement（“选项”）；
option.value=getVal（项，textProperty）；
datalist.appendChild（可选）；
});
ko.utils.triggerEvent（要素“变更”）；
}
};})();

仅使用MAC（操作系统）和Safari（网络浏览器）时，以下错误消息显示为：

消息：无法处理绑定“datalist:function（）{return{options:app.viewModel.riderProfiles（），optionsValue:'Id'，optionsText:'Name'，value:app.viewModel.selectedRiderId}”

消息：undefined不是对象（正在评估“u.innerHTML=”“”）

---

HTML元素包含一组表示其他控件可用值的元素

---

但是“Safari”浏览器不支持它。

HTML元素包含一组表示其他控件可用值的元素

---

但是“Safari”浏览器不支持它。

可能是Safari不支持

列表

属性，因为它是

规范的一部分吗？您可以与Safari浏览器共享可编辑下拉列表的解决方案吗？可能是Safari不支持

列表

属性，因为它是

规范的一部分吗？您能否与Safari浏览器共享可编辑下拉列表的解决方案。