From ff2a37ec361d3190cc683adc4369e6d15f920c2a Mon Sep 17 00:00:00 2001 From: Argo-AsicoTech Date: Sat, 14 Dec 2024 17:01:48 +0800 Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20=E5=A4=8D=E7=94=A8=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E6=A0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Select/Select.razor | 21 +++++++------------ 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/src/BootstrapBlazor/Components/Select/Select.razor b/src/BootstrapBlazor/Components/Select/Select.razor index ce7ae4202c1..1ce089ce4ae 100644 --- a/src/BootstrapBlazor/Components/Select/Select.razor +++ b/src/BootstrapBlazor/Components/Select/Select.razor @@ -31,15 +31,15 @@ }
+ @if (ShowSearch) + { +
+ + +
+ } @if (IsVirtualize) { - @if (ShowSearch) - { -
- - -
- }
@if (OnQueryAsync == null) { @@ -53,13 +53,6 @@ } else { - @if (ShowSearch) - { -
- - -
- } @foreach (var itemGroup in Rows.GroupBy(i => i.GroupName)) { if (!string.IsNullOrEmpty(itemGroup.Key)) From 66b03307f8e9e0aaff21121d3dd9223f94b61eac Mon Sep 17 00:00:00 2001 From: Argo-AsicoTech Date: Sat, 14 Dec 2024 17:02:29 +0800 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=94=B9=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E5=9B=9E=E8=B0=83=E6=9C=AA=E5=AE=A2=E6=88=B7=E7=AB=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Select/Select.razor.cs | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/BootstrapBlazor/Components/Select/Select.razor.cs b/src/BootstrapBlazor/Components/Select/Select.razor.cs index bb8689e57df..3209f32a4da 100644 --- a/src/BootstrapBlazor/Components/Select/Select.razor.cs +++ b/src/BootstrapBlazor/Components/Select/Select.razor.cs @@ -354,9 +354,8 @@ private async ValueTask> LoadItems(ItemsProvid private async Task SearchTextChanged(string val) { - SearchText = val; _itemsCache = null; - + SearchText = val; if (OnQueryAsync != null) { // 通过 ItemProvider 提供数据 @@ -399,7 +398,7 @@ private bool TryParseSelectItem(string value, [MaybeNullWhen(false)] out TValue /// /// /// - protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(ConfirmSelectedItem)); + protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new { ConfirmMethodCallback = nameof(ConfirmSelectedItem), SearchMethodCallback = nameof(TriggerOnSearch) }); /// /// 客户端回车回调方法 @@ -416,6 +415,18 @@ public async Task ConfirmSelectedItem(int index) } } + /// + /// 客户端搜索栏回调方法 + /// + /// + /// + [JSInvokable] + public async Task TriggerOnSearch(string searchText) + { + await SearchTextChanged(searchText); + StateHasChanged(); + } + /// /// 下拉框选项点击时调用此方法 /// From c52128404a7327c483fbe2a105e48b48770115fc Mon Sep 17 00:00:00 2001 From: Argo-AsicoTech Date: Sat, 14 Dec 2024 17:03:41 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=B1=89=E5=AD=97?= =?UTF-8?q?=E5=AF=BC=E8=87=B4=E6=90=9C=E7=B4=A2=E9=AB=98=E9=A2=91=E8=A7=A6?= =?UTF-8?q?=E5=8F=91=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Select/Select.razor.js | 35 +++++++++++++++---- 1 file changed, 29 insertions(+), 6 deletions(-) diff --git a/src/BootstrapBlazor/Components/Select/Select.razor.js b/src/BootstrapBlazor/Components/Select/Select.razor.js index 5f18ce671ff..f95e6673bf8 100644 --- a/src/BootstrapBlazor/Components/Select/Select.razor.js +++ b/src/BootstrapBlazor/Components/Select/Select.razor.js @@ -1,11 +1,11 @@ -import { getHeight, getInnerHeight, getTransitionDelayDurationFromElement } from "../../modules/utility.js" +import { debounce, getHeight, getInnerHeight, getTransitionDelayDurationFromElement } from "../../modules/utility.js" import Data from "../../modules/data.js" import EventHandler from "../../modules/event-handler.js" import Popover from "../../modules/base-popover.js" -export function init(id, invoke, method) { +export function init(id, invoke, options) { const el = document.getElementById(id) - + const { confirmMethodCallback, searchMethodCallback } = options; if (el == null) { return } @@ -64,7 +64,7 @@ export function init(id, invoke, method) { if (e.key === "Enter") { popover.toggleMenu.classList.remove('show') let index = indexOf(el, activeItem) - invoke.invokeMethodAsync(method, index) + invoke.invokeMethodAsync(confirmMethodCallback, index) } } } @@ -77,7 +77,27 @@ export function init(id, invoke, method) { el, popover } - Data.set(id, select) + Data.set(id, select); + + const onSearch = debounce(v => invoke.invokeMethodAsync(searchMethodCallback, v)); + let isComposing = false; + + EventHandler.on(el, 'input', '.search-text', e => { + if (isComposing) { + return; + } + + onSearch(e.delegateTarget.value); + }); + + EventHandler.on(el, 'compositionstart', '.search-text', e => { + isComposing = true; + }); + + EventHandler.on(el, 'compositionend', '.search-text', e => { + isComposing = false; + onSearch(e.delegateTarget.value); + }); } export function show(id) { @@ -108,7 +128,10 @@ export function dispose(id) { if (select) { EventHandler.off(select.el, 'shown.bs.dropdown') - EventHandler.off(select.el, 'keydown') + EventHandler.off(select.el, 'keydown'); + EventHandler.off(select.el, 'input'); + EventHandler.off(select.el, 'compositionstart'); + EventHandler.off(select.el, 'compositionend') Popover.dispose(select.popover) } }