programmatically show example

xcash · May 1, 2020 · 97579b8 · 97579b8
1 parent 6a75ed6
commit 97579b8
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/dist/latest/index.html b/dist/latest/index.html
@@ -44,6 +44,19 @@ <h1 class="border-bottom">Bootstrap Autocomplete (for Bootstrap version 4)</h1>
 							<input class="form-control advanced2AutoComplete" type="text" autocomplete="off">
 						</div>
 					</div>
+					<div class="form-row mb-3">
+						<label class="col-lg-3">
+							Show dropdown programmatically.
+						</label>
+						<div class="col-lg-7">
+							<input class="form-control basicAutoCompleteShowDropdown" data-url="testdata/test-list.json" type="text" autocomplete="off">
+						</div>
+						<div class="col-lg-2">
+							<button type="button" class="btn btn-block btn-outline-secondary basicAutoCompleteShowBtn">
+								Show
+							</button>
+						</div>
+					</div>
 				</fieldset>
 				<fieldset>
 					<legend class="border-bottom">
@@ -199,6 +212,15 @@ <h4 class="modal-title">Modal title</h4>
 					$('.basicAutoCompleteSelected').html('');
 				});
 
+				$('.basicAutoCompleteShowDropdown').autoComplete({
+					minLength: 0,
+				});
+
+				$('.basicAutoCompleteShowBtn').on('click', function () {
+					console.log('click');
+					$('.basicAutoCompleteShowDropdown').trigger('keyup');
+				});
+
 				// Advanced 1
 				$('.advancedAutoComplete').autoComplete({
 					resolver: 'custom',

diff --git a/src/index.html b/src/index.html
@@ -44,6 +44,19 @@ <h1 class="border-bottom">Bootstrap Autocomplete (for Bootstrap version 4)</h1>
 							<input class="form-control advanced2AutoComplete" type="text" autocomplete="off">
 						</div>
 					</div>
+					<div class="form-row mb-3">
+						<label class="col-lg-3">
+							Show dropdown programmatically.
+						</label>
+						<div class="col-lg-7">
+							<input class="form-control basicAutoCompleteShowDropdown" data-url="testdata/test-list.json" type="text" autocomplete="off">
+						</div>
+						<div class="col-lg-2">
+							<button type="button" class="btn btn-block btn-outline-secondary basicAutoCompleteShowBtn">
+								Show
+							</button>
+						</div>
+					</div>
 				</fieldset>
 				<fieldset>
 					<legend class="border-bottom">
@@ -199,6 +212,15 @@ <h4 class="modal-title">Modal title</h4>
 					$('.basicAutoCompleteSelected').html('');
 				});
 
+				$('.basicAutoCompleteShowDropdown').autoComplete({
+					minLength: 0,
+				});
+
+				$('.basicAutoCompleteShowBtn').on('click', function () {
+					console.log('click');
+					$('.basicAutoCompleteShowDropdown').trigger('keyup');
+				});
+
 				// Advanced 1
 				$('.advancedAutoComplete').autoComplete({
 					resolver: 'custom',