Question

我正在使用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>

Answer 1

找到解决方案：我使用<button>，默认类型的按钮是提交，因此我必须指定type =＆＃34;按钮＆＃34;，问题已修复....

参考：Found in UI-Select Pull Requests...

Answer 2

如果仍然有人在这个问题上挣扎，我找到了解决方案。像这样将skip-focusser="true"添加到用户界面选择中：

<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键不会重新打开下拉菜单。

按Enter键以选择下拉值直接提交表单

2 个答案: