Question

我想创建自动搜索搜索，当在文本输入字段中键入时，它会搜索数组并在显示的列表中显示结果，并可能选择结果。

提前谢谢。

Answer 1

使用jQuery自行完成自动填充非常简单。

我在15分钟内做到了这一点。这有点粗糙，所以你需要根据你的要求进行修改并完成它，我使用的是SCSS而不是CSS，所以你可能也想改变它。

请参阅此演示：JSFIDDLE

<强> HTML：

/*export*/ class DynamicComponentBase {
  @ViewChild('container', { read: ViewContainerRef })
  container: ViewContainerRef;
}

@Component({
  selector: 'tn-dynamic',
  template: `<ng-template #container></ng-template>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DynamicComponent extends DynamicComponentBase {
}

<强> jQuery的：

<div class="autocomplete-wrapper">
    <input type="text" id="query" autocomplete="off">
    <ul id="query-results"></ul>
</div>

<强> CSS：

var arr = ["Martin", "James", "Jamie", "Jameson", "Jamelia", "Jamela", "StackOverflow"];

$('#query').on({
    "focus": function() {
    $(this).parent().css('border-color', '#CCCCCC');
  },
  "blur": function() {
    $(this).parent().css('border-color', '#EEEEEE');
  },
  "keyup": function() {
    var results = [];
        var val = $(this).val();
    var $queryResults = $('#query-results');
    var queryResultsMarkup = "";

    if (val.length > 1) {
            $queryResults.html("").hide();
            $.each(arr, function(i) {
                if (arr[i].match(new RegExp(val,'i'))) {
                    var $li = $('<li/>')
                        .html(arr[i])
                    .attr('data-value', arr[i]);
                $queryResults.append($li).show();
            }
        });

        $('li').on('click', function() {
            var selectedVal = $(this).attr('data-value');
            $('#query').val(selectedVal);
            $('#query-results').html("").hide();
        });
    } else {
            $queryResults.html("").hide();
    }
  }
});

有没有办法让bootstrap自动完成文本字段没有任何第三方插件？

1 个答案: