Ask about Auto complete JS to record the values we find for each line.

[Sloter manago]

Database DesignPHPHHTMLDatabaseMySQL

รีวิวสล็อตออนไลน์ เกมสล็อตออนไลน์ เว็บสล็อตUFABET

I have done auto complete, but I want to make a quote with a push button to add more lines. Then when you press search on the list It always goes up to the first line. I want it to be saved that we chose the first line. The second line goes on and on. Please help me

[Deepak Ramakrishnan]

Hi Sloter,  

 

Thanks for contacting Syncfusion support. 

 

We are currently validating the provided query and we will update further details on or before of 23^rd,July 2021. We appreciate your patience until then.  

 

Regards,  

Deepak R. 

[Deepak Ramakrishnan]

Hi Sloter, 

 

Thanks for your patience. 

 

We have validated your requirement , And found that we can achieve the scenario using ‘addItem()’ by passing the items to be added and index of the item should be added.But unfortunately we are facing issue with ‘itemIndex’ . So we need to further validate the issue in our end and update the possibilities on or before 9^th,August 2021. We appreciate your patience until then. 

 

As of now we have created a sample which adds the item to the AutoComplete component if the item is not listed in popup. 

 

filtering: (e: FilteringEventArgs) => { 

        let query: Query = new Query(); 

        // frame the query based on search string with filter type. 

        query = (e.text !== '') ? query.where('Name', 'startswith', e.text, true) : query; 

        // pass the filter data source, filter query to updateData method. 

        e.updateData((data as any).countries, query); 

        if (document.getElementById('nodata')) { 

          // bind click event to button which is shown in popup element when the typed character(s) is not present in the list 

          document.getElementById('btn').onclick = () => { 

            // get the typed characters 

            let customValue: string = (document.getElementById('country') as HTMLInputElement).value; 

            // make new object based on typed characters 

            let newItem: { [key: string]: Object; } = {'Name': customValue, 'Code': customValue }; 

            // new object added to data source. 

            (autoCompleteObj.dataSource as Object[]).push(newItem); 

            // close the popup element. 

            autoCompleteObj.hidePopup(); 

            // pass new object to addItem method. 

            autoCompleteObj.addItem(newItem,1); 

            // select the newly added item. 

            autoCompleteObj.value = customValue; 

          }; 

        } 

    } 

 

 

 

 

Sample Link: https://stackblitz.com/edit/mkhbf5?file=index.ts 

 

Kindly revert us if you have any concerns it. 

 

 

Thanks, 

Deepak R. 

[Deepak Ramakrishnan]

Hi Sloter,  

  

Thanks for your patience.  

  

We can achieve your requirement by using ‘UpdateData()’ method. By using the method we can maintain the newly added items at the first position. Kindly refer the below highlighted code and  sample for your reference . 

  

  

filtering: (e: FilteringEventArgs) => { 

    let query: Query = new Query(); 

    // frame the query based on search string with filter type. 

    query = 

      e.text !== '' ? query.where('Name', 'startswith', e.text, true) : query; 

    // pass the filter data source, filter query to updateData method. 

    e.updateData((data as any).countries, query); 

    if (document.getElementById('nodata')) { 

      // bind click event to button which is shown in popup element when the typed character(s) is not present in the list 

      document.getElementById('btn').onclick = () => { 

        // get the typed characters 

        let customValue: string = (document.getElementById( 

          'country' 

        ) as HTMLInputElement).value; 

        // make new object based on typed characters 

        let newItem: { [key: string]: Object } = { 

          Name: customValue, 

          Code: customValue 

        }; 

        // new object added to data source. 

        (autoCompleteObj.dataSource as Object[]).splice(0, 0, newItem); 

        // close the popup element. 

        autoCompleteObj.hidePopup(); 

        // pass new object to addItem method. 

        autoCompleteObj.addItem(newItem, 0); 

        // select the newly added item. 

        autoCompleteObj.value = customValue; 

      }; 

    }  

  

  

  

Sample Link:  https://stackblitz.com/edit/mkhbf5-fu5nzy?file=index.ts  

 

Kindly revert us if you have any concerns it.  

  

  

Thanks,  

Deepak R.