Visual Builder

Get Involved. Join the Conversation.

Topic

    Mayank Srivastava
    Issue in Auto suggest and auto complete of oj-input-text
    Topic posted August 15, 2019 by Mayank SrivastavaGreen Ribbon: 100+ Points, tagged Custom Code, JET, Web 
    42 Views, 5 Comments
    Title:
    Issue in Auto suggest and auto complete of oj-input-text
    Summary:
    Issue in Auto suggest and auto complete of oj-input-text
    Content:

    I want to implement auto suggest and auto complete on oj-input-text. I have used the below code in my html page:

    <oj-input-text id="avSearchbox" autocomplete="off"  clear-icon="conditional" on-focus="[[$listeners.avSearchboxFocus]]" on-keydown="[[$listeners.avSearchboxKeydown]]" on-keypress="[[$listeners.avSearchboxKeypress]]" on-keyup="[[$listeners.avSearchboxKeyup]]" on-click="[[$listeners.avSearchboxClick]]"></oj-input-text>

    I am calling an action chain on the above events in which i am using a module function. To get the details of the selected text from the auto suggest, I am using event.getSource which is giving error as it is not able to detect the type of event in the module function. Please suggest a way or any reference how we can pass the event details to the module function of the action chain.

     

    Version:
    vbcs

    Comment

     

    • Shay Shmeltzer

      The inputText has a raw-value attribute - bind it to a page variable.

      Then pass that variable as an input to your module function.

      • Mayank Srivastava

        Please correct me if the below syntax is wrong.. I added one new variable i.e. searchValue at page level  and I added the property in the below way :

        raw-value="{{$page.variables.searchValue}}"

        But still i am getting it as undefined in the module function.

         

        • Shay Shmeltzer

          Are you passing the variable as an input parameter to your JS code?

          Does the console show the value being passed correctly to that function?

    • Shay Shmeltzer

      If you take this video as the base:

      https://youtu.be/4RaG66jFcPI

      Then add a JS function:

        PageModule.prototype.hello= function(bar){
          console.log(bar);
        }
        And in your HTML use:

          <oj-input-text raw-value="{{$page.variables.searchvar}}" on-keydown="[[$listeners.ojInputText15138146521Keydown]]"></oj-input-text>

      It should work.

      I noticed you have many events on your input text - I think you only need the keydown event.