1

我正在使用 ui-select，每当我按 enter 选择一些搜索结果时，都会选择结果并直接提交表单。我想不通，这是什么问题。

这是我正在使用的 HTML

<form>
    <div class="form-group">
        <label class="col-sm-3 control-label">Address</label>
        <div class="col-sm-5">
            <input type="text" ng-model="address.street" class="form-control"  placeholder="e.g. NUST Campus, H-12">        
            <div class="form_wrapper_error">
                <p ng-show='addressError'>{{addressError}}</p>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">City/Town</label>
        <div class="col-sm-5">
            <!-- <location-autocomplete bind-value="address.city" coordinates="cityAddInitialCoordinates" placeholder="e.g. Islamabad"> -->
            <ui-select ng-model="$parent.address.city"
                theme="select2"
                reset-search-input="true"
                title="Select City">
                <ui-select-match allow-clear="true" placeholder="Select City">{{$select.selected}}</ui-select-match>
                <ui-select-choices repeat="city as city in cities track by $index"
                    refresh="refreshLocation($select.search)"
                    refresh-delay="0">
                    <div ng-bind-html="city | highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>
            <div class="form_wrapper_error">
                <p ng-show='cityError'>{{cityError}}</p>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">Zip</label>
        <div class="col-sm-5">
            <input type="text"  ng-model="address.zip" class="form-control"  placeholder="e.g. 44000">
            <div class="form_wrapper_error">
                <p ng-show='zipError'>{{zipError}}</p>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-8">
            <button class="btn btn-primary buttt" ng-click="addAddress()">Add Address</button>
        </div>
    </div>
</form>
4

2 回答 2

3

找到的解决方法：我用<button>的是，按钮的默认类型是提交，所以我必须指定type="button"，问题解决了....

参考：在 UI-Select Pull Requests 中找到...

于 2015-04-20T10:27:22.040 回答
0

如果有人仍然在这个问题上苦苦挣扎，我找到了解决方案\解决方法。像这样添加skip-focusser="true"到您的 ui-select 中：

<ui-select ng-model="$parent.ngModel" theme="bootstrap" class="input-xs" skip-focusser="true">
<ui-select-match >{{$select.selected.description}}</ui-select-match>
<ui-select-choices repeat="item in options | orderBy :'code' | filter: $select.search">
   <div ng-bind-html="item.description | highlight: $select.search"></div>
</ui-select-choices>

这将从选择元素中移除焦点，因此 Enter 键不会重新打开下拉菜单。

于 2020-10-12T10:49:34.313 回答