AutoComplete 如何清空上一次筛选数据，选中状态

在开发过程中遇到两个问题第一个问题
1,首先输入一个"no"，会出现下拉列表，选择一条后删掉，然后移出焦点，想在焦点移出后让下拉列表为空。

开始以为修改一下itemsSourceFunction 的callback值，就试了null和new array，但并不能清空，还是上一次筛选出的值。请问有方法让text框为空或者输入空格的时候，清空下拉列表。


AutoComplete 异步加载示例
https://demo.grapecity.com.cn/wijmo/demos/Input/AutoComplete/AsyncLoading/react
如图，先输入no，筛选出来值，删除后，移除出焦点，或者输入空格，都不能清除现有的下拉列表

输入no

随意选择一条

删除后移出焦点或者输入空格，都没法让下拉列表清空




第二个问题
输入一个完全匹配的项目，点开下拉列表，没有自动选中。有没有方法让完全匹配的这种数据自动被选中
完全匹配的样子

鼠标点击的样子，想让上面的状态和下面的状态相同

你好，textChanged的确不行，首先如你所说它的触发顺序在itemsSource之前，其次这个示例是远程加载数据，所以这里还有一个异步请求。因此要实现这个功能，只能在异步请求内部来做。

参考以下完整代码：

1. 
   

复制代码

1. import 'bootstrap.css';
   
2. import '@grapecity/wijmo.styles/wijmo.css';
   
3. import './styles.css';
   
4. //
   
5. import * as wijmo from '@grapecity/wijmo';
   
6. import * as input from '@grapecity/wijmo.input';
   
7. //
   
8. document.readyState === 'complete' ? init() : window.onload = init;
   
9. //
   
10. function init() {
    
11.     // AutoComplete with async search using OData source
    
12.     let theAutoComplete = new input.AutoComplete('#theAutoComplete', {
    
13.         placeholder: 'Product Name',
    
14.         displayMemberPath: 'ProductName',
    
15.         itemsSourceFunction: (query, max, callback) => {
    
16.             if (!query) {
    
17.                 callback(null);
    
18.                 return;
    
19.             }
    
20.             //
    
21.             wijmo.httpRequest('https://services.odata.org/Northwind/Northwind.svc/Products', {
    
22.                 data: {
    
23.                     $format: 'json',
    
24.                     $select: 'ProductID,ProductName',
    
25.                     $filter: 'indexof(ProductName, \'' + query + '\') gt -1'
    
26.                 },
    
27.                 success: (xhr) => {
    
28.                     let response = JSON.parse(xhr.response);
    
29.                     let value = response.value;
    
30.                     if(value){
    
31.                         value.forEach(function(val){
    
32.                             if(query == val.ProductName){
    
33.                                 setTimeout(function(){
    
34.                                     theAutoComplete.selectedItem = val;
    
35.                                     if(theAutoComplete.isDroppedDown){
    
36.                                         theAutoComplete.isDroppedDown = false;
    
37.                                     }
    
38.                                 }, 10);
    
39.                             }
    
40.                         });
    
41.                     }
    
42.                     callback(response.d ? response.d.results : response.value);
    
43.                 }
    
44.             });
    
45.         },
    
46.         selectedIndexChanged: function () {
    
47.             let product = theAutoComplete.selectedItem;
    
48.             document.querySelector('#msg').textContent = product
    
49.                 ? wijmo.format('{ProductName} (ID: {ProductID})', product)
    
50.                 : 'None';
    
51.         },
    
52.         lostFocus: function (e) {
    
53.             if(!e.text || e.text.length == 0){
    
54.                 e.listBox.itemsSource.items.splice(0)
    
55.                 e.listBox.itemsSource.refresh()
    
56.             }
    
57.         }
    
58.     });
    
59. }
    

复制代码

示例地址：

https://demo.grapecity.com.cn/wi ... AsyncLoading/purejs

您好，您的两个问题，需要一些时间来调研，可能还要写一些自定义代码来实现，今天下午18点前回复

问题一，用lostFocus事件实现，关键代码如下：

1. lostFocus: function (e) {
   
2.             if(!e.text || e.text.length == 0){
   
3.                 e.listBox.itemsSource.items.splice(0)
   
4.                 e.listBox.itemsSource.refresh()
   
5.             }
   
6.         }

复制代码

完整代码如下：

1. import 'bootstrap.css';
   
2. import '@grapecity/wijmo.styles/wijmo.css';
   
3. import './styles.css';
   
4. //
   
5. import * as wijmo from '@grapecity/wijmo';
   
6. import * as input from '@grapecity/wijmo.input';
   
7. //
   
8. document.readyState === 'complete' ? init() : window.onload = init;
   
9. //
   
10. function init() {
    
11.     // AutoComplete with async search using OData source
    
12.     let theAutoComplete = new input.AutoComplete('#theAutoComplete', {
    
13.         placeholder: 'Product Name',
    
14.         displayMemberPath: 'ProductName',
    
15.         itemsSourceFunction: (query, max, callback) => {
    
16.             if (!query) {
    
17.                 callback(null);
    
18.                 return;
    
19.             }
    
20.             //
    
21.             wijmo.httpRequest('https://services.odata.org/Northwind/Northwind.svc/Products', {
    
22.                 data: {
    
23.                     $format: 'json',
    
24.                     $select: 'ProductID,ProductName',
    
25.                     $filter: 'indexof(ProductName, \'' + query + '\') gt -1'
    
26.                 },
    
27.                 success: (xhr) => {
    
28.                     let response = JSON.parse(xhr.response);
    
29.                     callback(response.d ? response.d.results : response.value);
    
30.                 }
    
31.             });
    
32.         },
    
33.         selectedIndexChanged: function () {
    
34.             let product = theAutoComplete.selectedItem;
    
35.             document.querySelector('#msg').textContent = product
    
36.                 ? wijmo.format('{ProductName} (ID: {ProductID})', product)
    
37.                 : 'None';
    
38.         },
    
39.         lostFocus: function (e) {
    
40.             if(!e.text || e.text.length == 0){
    
41.                 e.listBox.itemsSource.items.splice(0)
    
42.                 e.listBox.itemsSource.refresh()
    
43.             }
    
44.         }
    
45.     });
    
46. }
    

复制代码

将完整代码复制替换示例的app.js即可：

https://demo.grapecity.com.cn/wi ... AsyncLoading/purejs

问题二：可以实现。与一同理，可以用textChanged事件来监听 用户输入的内容，每次内容变化时判断dataSource中有没有对应的item，有item时直接选中即可。

KevinChen 发表于 2020-6-16 11:34
问题二：可以实现。与一同理，可以用textChanged事件来监听 用户输入的内容，每次内容变化时判断dataSource ...

第一个问题很顺利的解决了，很感谢
但是第二个还是存在一定的问题

对于版主说的方法进行了实验，并没有成功
debug发现，更改输入内容后是先触发了textChanged事件，后触发了itemsSourceFunction
这样就导致在textChanged事件中设定的代码失效。感觉是因为在itemsSourceFunction设定了新的list数据。
不清楚是我代码实现的不正确还是确实不太可以。麻烦再帮忙调查一下。谢谢