Entering free form text into wj-multi-auto-complete input

Entering free form text into wj-multi-auto-complete input

Posted by: johnny.su on 23 September 2020, 1:37 pm EST

• 

  johnny.su

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 23 September 2020, 1:37 pm EST

  Hi,

  Is it possible to enter values into a multi-autocomplete input without selecting it from the dropdown? We’re going to have a big list and a lot of times the users will just enter a value and move on. It seems like I have to open the dropdown and select the value.

  For example:
  
  let data = [ {code: ‘AA’, display: ‘AA desc’}, { code: ‘BB’, display: ‘BB desc’}, { code: ‘CC’, display: ‘CC desc’} ];

  <wj-multi-auto-complete
  
  [clickAction]=“2”
  
  [itemsSource]=“data "
  
  [selectedItems]=“selectedCodes”
  
  [displayMemberPath]=”‘display’"
  
  [selectedValuePath]=“‘code’”
  
  [headerPath]=“‘code’”>
  
  

  I would like to be able to just type in ‘AA’ and tab out of the input to have it be selected so I don’t have to open the dropdown.

  Thanks,
  
  Johnny

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 28 September 2020, 1:29 am EST

  Hi,

  We are working on this and will provide you an update soon.

  Regards

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 28 September 2020, 8:00 am EST

  Hi Johnny,

  To achieve the required functionality you need to override the _keydown method of the MultiAutoComplete. Please refer to the following code snippet and the sample demonstrating the same:

  var _oldFn = wjInput.MultiAutoComplete.prototype._keydown;
  wjInput.MultiAutoComplete.prototype._keydown = function (e) {
    if (e.defaultPrevented || e.keyCode !== wjCore.Key.Tab) {
      _oldFn.apply(this, arguments);
      return;
    }
  
    setTimeout(() => {
      if (!this.collectionView.items.length) {
        return;
      }
  
      let item = this.collectionView.items[0];
      if (this.selectedItems.indexOf(item) < 0) {
        this.selectedItems.push(item);
        this.text = null;
        this.invalidate();
      }
    }, this.delay);
  };
  

  https://codesandbox.io/s/wijmo-angular-forked-b1edi?file=/src/app/app.component.ts

  ~sharad

• 

  johnny.su

  • Post Options:
  • Link
    Copy

  Posted 29 September 2020, 11:49 am EST

  Thanks Sharad! Works great!

• 

  boyagowri

  • Post Options:
  • Link
    Copy

  Posted 22 December 2020, 1:36 pm EST

  Hi Sharad,
  
  In Wj-auto-complete I have a use case where auto complete should work in two ways

  1. based on first 3 character it should fetch from available list of array – (working as expected)
     
     2.I need to capture the text entered by user after entering first 3 characters which is not available in array list but need to capture the complete input provided by user – (not working)

  <wj-multi-auto-complete
  
  #mac1
  
  [itemsSource]=“items”
  
  [maxSelectedItems]=“1”
  
  [selectedItems]=“items”
  
  [placeholder]=“‘Banner Name’”
  
  (selectedItemsChanged)=“itemschanges($event, mac1)”
  
  >
  
  

  ts file
  
  //AutoComplete Method
  
  itemschanges(event, data) {
  
  console.log(data.selectedItems[0],‘fsdfsdf’) – getting undefined here
  
  this.bannerData.BannerName =
  
  data.selectedItems == null || data.selectedItems[0] == “”
  
  ? “”
  
  : data.selectedItems[0];
  
  }

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 23 December 2020, 6:13 pm EST

  Hi,

  To achieve the required functionality you may set the itemsSource function of the Autocomplete. Inside the itemsSourceFunction if the search text is less than 3 characters then search in the preloaded list and return the result other make an API call with the search parameter and return the search result. Please refer to the following demo which demonstrates how we could use the itemsSourceFunction and let us know if you face any issues:
  
  https://www.grapecity.com/wijmo/demos/Input/AutoComplete/AsyncLoading/purejs

  Regards

• 

  gowri.boya

  • Post Options:
  • Link
    Copy

  Posted 1 January 2021, 3:07 am EST - Updated 3 October 2022, 2:56 pm EST

  

  when I’m trying to set default value empty to wj-multi-auto-complete, in image you can see it is getting like that, will you please suggest how to set it as empty,
  
  code in ts
  
  this.items = [‘’,‘Gulfaks’,‘Oseberg’,‘test123’];
  
  html
  
  <wj-multi-auto-complete #mac1 [itemsSource]=“items” [maxSelectedItems]=“1” [selectedItems]=“items”
  
  (lostFocus)=“lostFocus(mac1)”>
  
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 4 January 2021, 5:13 pm EST

  Hi,

  To achieve the required functionality, you may simply set the selectedIndex to -1 as demonstrated in the following demo:
  
  https://www.grapecity.com/wijmo/demos/Input/MultiAutoComplete/Overview/angular

  Regards