1

I have an input box with auto complete extender. I want to simulate the key press using jquery or javascript. The key press should actually open the auto complete popup.

I searched for simulating keypress using jquery and came up with these answers: 1) Simulate Keypress With jQuery 2) Simulating a Keypress Event from Javascript Console 3) JQuery simulating keypress event on an input field

All of these allow me to just simulate a single key in at a time. But what if I want to allow batch key events? For example, I want to directly key in "abcde" text in a single line of code without having to type in the key code of each character.

EDIT:

I am trying to simulate key press using google chrome console. None of the answers have worked for me :(

Is it possible via jquery/javascript or some other library?

Community
  • 1
  • 1
rahulserver
  • 10,411
  • 24
  • 90
  • 164
  • Why not just set value, `$('selector').val('abcde');` – Tushar Oct 16 '15 at 05:05
  • @Tushar it does not work. To test this, try `$(".gsfi").val('abcde')` on google.com (I am trying on google chrome console FYI) – rahulserver Oct 16 '15 at 05:13
  • if each one can work, then call them in a row, something akin to `"hello".split("").map(simKey)` – dandavis Oct 16 '15 at 05:16
  • @dandavis I am trying to do in google chrome console. Nothing as of now has worked which has allowed me to key in some values in an `input` – rahulserver Oct 16 '15 at 05:49
  • Give it a value and then give it focus is perhaps and quick and dirty test `$('selector').val('abcde').focus();` – StudioTime Oct 16 '15 at 06:53

2 Answers2

2

This code simulates typing into the input box:

var txt = "Lorem ipsum dolor";
var timeOut;
var txtLen = txt.length;
var char = 0;
var tb = $("#tb").attr("value", "|");
(function typeIt() {
    var humanize = Math.round(Math.random() * (200 - 30)) + 30;
    timeOut = setTimeout(function () {
        char++;
        var type = txt.substring(0, char);
        tb.attr("value", type + '|');
        typeIt();

        if (char == txtLen) {
            tb.attr("value", tb.attr("value").slice(0, -1))
            clearTimeout(timeOut);
        }

    }, humanize);
}());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="tb">
xxxmatko
  • 4,017
  • 2
  • 17
  • 24
0

Per my understanding, you are looking for a way not to process auto complete on every keypress, and wants to allow user to add a proper word and then process it.

Solution

  1. Add a keydown event on textbok.
  2. Create a SetInterval which will trigger event, once threshold time is met.
  3. Reset interval on every keydown to make sure threshold time remains same, no matter how long the query is.
  4. Clear Interval once processing of Auto complete, so that you do not hit function every second.

Following is the JSFiddle depicting the same.

Code

var interval = 0;
var callInterval = null;

function registerEvents(){
 $("#txtField").on("keydown", function(e){
     var keyCode = e.keyCode ? e.keyCode : e.which;
        console.log(keyCode);
        if(!callInterval){ 
            intervalInit();
        }
        else{
         resetInterval();
        }
    });
}

function intervalInit(){
 interval = 0;
    callInterval = setInterval(function(){
     interval++;
        if(interval >=1){
         fetchAutoCompleteData($("#txtField").val());
            window.clearInterval(callInterval);
            callInterval = null;
        }
    },1000);
}

function resetInterval(){
    window.clearInterval(callInterval);
    intervalInit()
}

function fetchAutoCompleteData(data){
 console.log("Data: ", data)
}
(function(){
 registerEvents();
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" id="txtField"/>
Rajesh
  • 24,354
  • 5
  • 48
  • 79