This is a migrated thread and some comments may be shown as answers.

running different functions within the onChange event based on what function called it

0 Answers 669 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Shane P
Top achievements
Rank 1
Shane P asked on 17 Apr 2012, 06:33 AM
I am having some trouble trying to get the autocomplete to work as I need it to.

My autocomplete is setup like

$("#customer").kendoAutoComplete({
          minLength: 2,
          dataTextField: "CustomerId",
          animation: {
              open: {
                  effects: "fadeIn",
                  duration: 300,
                  show: true
              }
          },
          filter: "contains",
          change: onChange,
          select: onSelect,
          placeholder: "Search.....",
          template: '<div><div class="arrow"></div>' +
          //            '<span>#=FirstName# #=LastName#</span> <span>#=CustomerId#</span>'
          '<span>#=FirstName# #=LastName#</span>'
          +
          '</div>',
          dataSource: {
              serverFiltering: true,
              transport: {
                  read: {
                      url: "/API/Customer/Get",
                      dataType: "json",
                      data: function () {
                          return {
                              data: $("#customer").data("kendoAutoComplete").value()
                          };
                      }
                  }
              }
          }
      });

function onSelect(e) {
           console.log("on select");
           var autocomplete = $("#customer").data("kendoAutoComplete");
           var value = autocomplete.value();
       doMyFunctionForSelect(value);//maybe its to soon to be calling this
       }
 
       function onChange(e) {
           console.log("on change");
           console.log(e);
           var autocomplete = $("#customer").data("kendoAutoComplete");
           var value = autocomplete.value();
           if (value.length > 0) {
               var last = e.sender._last;
               if (last == 13) {
                   doMyFunctionForFormSubmit();
               }
           }
       }

I want to be able to run 2 different functions based on how the function gets its data.

For example if the users select a customers name from the dropdown list I want to call doMyFunctionForSelect(); else if the user enters a customers name that doesnt exist then call doMyFunctionForFormSubmit(); 

My problem happens when I select an item from the dropdown list. The value I am seeing in my select function is only the text I added to the textbox not the CustomerId field I need.

After the select function is called the onChange() is called where I can see the actual CustomerId value using autocomplete.value();

If using the code above I enter something like test1234 and there isn't a customer with that name then autocomplete dropdown doesnt appear (as desired). The onSelect() is never called and works fine. 

Within the onChange() function is possible to tell if it has been called directly after onSelect()? this way I could do a check to see how the function has been called so I run either of the functions I need to.

Hope someone can point me in the right direction!

Thank you






No answers yet. Maybe you can help?

Tags
AutoComplete
Asked by
Shane P
Top achievements
Rank 1
Share this question
or