AngularJS替换md-autocomplete为datalist并修复ng-change失效问题

现有改造代码存在3个核心问题导致变更回调不触发：

• ng-model绑定值与option实际返回值类型不匹配：当前ng-model绑定的是选中项对象，但option仅配置了item.value字符串作为值，AngularJS无法正确识别值变更，ng-change指令不会被触发。
• 缺失搜索文本绑定：原md-autocomplete通过md-search-text绑定实时输入的搜索词，当前input未绑定searchText变量，不仅querySearch无法拿到实时输入值，原有的searchTextChange搜索触发逻辑完全没有执行入口。
• 原生datalist默认行为限制：datalist选中选项时仅会把option的value值填充到输入框，不会主动返回完整的选项对象，和原组件返回完整选中项的逻辑不兼容，直接调用selectedItemChange拿不到正确的item参数。

1. 替换模板代码 #

<input 
    type="search"
    id="[[${searchable.id}]]"
    name="[[${searchable.reference}]]"
    list="data[[${dataid}]][[${searchable.reference}]]"
    class="searchable-class"
    ng-model="searchText"
    ng-required="data[[${dataid}]][[${searchable.reference}]].required && data[[${dataid}]][[${searchable.reference}]].visible"
    placeholder="Search..."
    ng-keydown="[[${searchable.id}]].onKeypress($event)"
    ng-disabled="data[[${dataid}]][[${searchable.reference}]].disabled"
    ng-blur="[[${searchable.id}]].onBlur()"
    ng-focus="[[${searchable.id}]].focus()"
    xcriteria="[[${searchable.dataid}]]"
    lang="[[${searchable.reference}]]"
    ng-change="handleSearchableChange()"
/>
<datalist id="data[[${dataid}]][[${searchable.reference}]]">
    <option 
        ng-repeat="item in [[${searchable.id}]].querySearch(searchText)"
        value="{{item.value}}"
    >
        {{item.value}}
    </option>
</datalist>

2. 控制器补充变更处理方法 #

在对应作用域内添加如下方法，对齐原组件的两个核心回调逻辑：

$scope.handleSearchableChange = function() {
    // 触发原搜索文本变更逻辑
    $scope.[[${searchable.id}]].searchTextChange($scope.searchText);

    // 大小写不敏感匹配当前输入对应的选项，和原md-match-case-insensitive逻辑对齐
    const currentOptions = $scope.[[${searchable.id}]].querySearch($scope.searchText);
    const selected = currentOptions.find(item => {
        return $scope.[[${searchable.id}]].itemText(item).toLowerCase() === $scope.searchText.toLowerCase();
    });

    // 命中选项则触发选中项变更回调，否则清空选中值
    if (selected) {
        $scope.[[${searchable.id}]].selectedItem = selected;
        $scope.[[${searchable.id}]].selectedItemChange(selected);
    } else {
        $scope.[[${searchable.id}]].selectedItem = null;
    }
}

• 清空按钮：原生type="search"输入框自带清空按钮，通过如下CSS可实现原组件“非禁用状态才显示清空按钮”的逻辑：

.searchable-class::-webkit-search-cancel-button {
    display: none;
}
.searchable-class:not(:disabled)::-webkit-search-cancel-button {
    display: block;
}

• 点击即展示下拉（对应原md-min-length="0"配置）：在原有的[[${searchable.id}]].focus()方法中添加一行逻辑，聚焦时如果搜索词为空主动触发一次值更新即可：

// 加在focus方法内
if (!$scope.searchText) {
    $scope.searchText = '';
}

• 选中即匹配（对应原md-select-on-match="true"配置）：上述handleSearchableChange方法已经实现了输入值完全匹配选项时自动触发选中逻辑，无需额外配置。

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