We Keep Coding

javascript function "document.getElementById()" does the work as expected

I am working on a browser recording test, in which I am entering a value into an Input field with an
auto search trigger functionality.
document.getElementById('InputFieldWIthSearchFunctionality').value = "Saurav";
But the search is not triggered if I set the value to the field as above.
Kindly help.

Just setting the value will not call the onchange and/or oninput event listeners of the input field. The auto search trigger is probably listening to this event.
You can dispatch both of these events manually to the input field:
const elem = document.getElementById("InputFieldWIthSearchFunctionality");
// create onchange event
const onchangeEvent = document.createEvent("HTMLElements");
onchangeEvent.initEvent("onchange", false, true);
// create oninput event
const oninputEvent = document.createEvent("HTMLElements");
oninputEvent.initEvent("oninput", false, true);
// dispatch events to the input field
elem.dispatchEvent(onchangeEvent);
elem.dispatchEvent(oninputEvent);
This definitely works in Chrome and all browsers using Chromium, I did not test any other browser, that would be up to you.
Information about manually dispatching events taken from this answer: https://stackoverflow.com/a/2856602/7846567

Think of it this way... by setting the value directly using JS, you are shortcutting the typical UI that a real user would use thus causing this issue. JS should be used sparingly (almost never) if you are trying to write tests that act like a user would and now you can see why.
In Java you would do this
driver.findElement(By.id("InputFieldWIthSearchFunctionality")).sendKeys("Saurav");
which would cause the search to fire in your case.

in google search box which event fire?

in google search box when we typing something , On that time some auto complete result coming after select any one it automatically fire no need to
focusout()
or
any click()
how it create

There are basically three key related events keydown, keypress and keyup, it is using combination of these events... To make you understand more here is the detail
keydown is fired when the key is down (like in shortcuts; for example, in Ctrl+A, Ctrl is held 'down'.
keyup is fired when the key is released (including modifier/etc keys)
keypress is fired as a combination of keydown and keyup, or depending on keyboard repeat (when keyup isn't fired). (this repeat behaviour is something that I haven't tested. If you do test, add a comment!) If user keep key pressed, then this event is fired for every character added by the browser.
NOTE: Remember one thing, if you are fetching the value from the field never ignore the keyup event, because while getting text of the input you won't get the last type character from the textfield until keyup event is fired...
See this fiddle to get more idea about key events..

How to use "input propertychange" events to capture just copy and paste by mouse

I want to capture change happened in textarea (keyup, and also copy&past), for keyup option i use :
$("textarea").keyup(function(){
// ajax call here
});
i added this to capture pasting or cutting by mouse then trigger keyup event on the textarea:
$("textarea").on('input propertychange', function() {
$(this).trigger(keyup);
});
the problem here is if i press a key in my keyboard , i get 2 ajax calls because the second function capture also keyup event.
Is there a way to prevent $("textarea").on('input propertychange'... from detecting a press key ?

Why not test this simplification? As I tested your code, without success on detecting keyup in 'input propertychange' event.
You ignore keyup event:
//$("textarea").keyup(function(){
//// ajax call here
//});
And capture only this (do ajax call with this):
$("textarea").on('input propertychange', function() {
//$(this).trigger(keyup);
// do ajax call here
});
the latter ignores only some control keys, ie, key without corresponding character input.

after doing some research i found a solution here :
How to run a function once when binding to multiple events that all trigger in Javascript?
i think this is the best solution to prevent calling event twice in my situation

Detecting input change in jQuery?

When using jquery .change on an input the event will only be fired when the input loses focus
In my case, I need to make a call to the service (check if value is valid) as soon as the input value is changed. How could I accomplish this?

UPDATED for clarification and example
examples: http://jsfiddle.net/pxfunc/5kpeJ/
Method 1. input event
In modern browsers use the input event. This event will fire when the user is typing into a text field, pasting, undoing, basically anytime the value changed from one value to another.
In jQuery do that like this
$('#someInput').bind('input', function() {
$(this).val() // get the current value of the input field.
});
starting with jQuery 1.7, replace bind with on:
$('#someInput').on('input', function() {
$(this).val() // get the current value of the input field.
});
Method 2. keyup event
For older browsers use the keyup event (this will fire once a key on the keyboard has been released, this event can give a sort of false positive because when "w" is released the input value is changed and the keyup event fires, but also when the "shift" key is released the keyup event fires but no change has been made to the input.). Also this method doesn't fire if the user right-clicks and pastes from the context menu:
$('#someInput').keyup(function() {
$(this).val() // get the current value of the input field.
});
Method 3. Timer (setInterval or setTimeout)
To get around the limitations of keyup you can set a timer to periodically check the value of the input to determine a change in value. You can use setInterval or setTimeout to do this timer check. See the marked answer on this SO question: jQuery textbox change event or see the fiddle for a working example using focus and blur events to start and stop the timer for a specific input field

If you've got HTML5:
oninput (fires only when a change actually happens, but does so immediately)
Otherwise you need to check for all these events which might indicate a change to the input element's value:
onchange
onkeyup (not keydown or keypress as the input's value won't have the new keystroke in it yet)
onpaste (when supported)
and maybe:
onmouseup (I'm not sure about this one)

With HTML5 and without using jQuery, you can using the input event:
var input = document.querySelector('input');
input.addEventListener('input', function()
{
console.log('input changed to: ', input.value);
});
This will fire each time the input's text changes.
Supported in IE9+ and other browsers.
Try it live in a jsFiddle here.

As others already suggested, the solution in your case is to sniff multiple events.
Plugins doing this job often listen for the following events:
$input.on('change keydown keypress keyup mousedown click mouseup', handler);
If you think it may fit, you can add focus, blur and other events too.
I suggest not to exceed in the events to listen, as it loads in the browser memory further procedures to execute according to the user's behaviour.
Attention: note that changing the value of an input element with JavaScript (e.g. through the jQuery .val() method) won't fire any of the events above.
(Reference: https://api.jquery.com/change/).

// .blur is triggered when element loses focus
$('#target').blur(function() {
alert($(this).val());
});
// To trigger manually use:
$('#target').blur();

If you want the event to be fired whenever something is changed within the element then you could use the keyup event.

There are jQuery events like keyup and keypress which you can use with input HTML Elements.
You could additionally use the blur() event.

This covers every change to an input using jQuery 1.7 and above:
$(".inputElement").on("input", null, null, callbackFunction);

onBlur event overriding jQuery UI events

I have a textbox that is wired up using jQuery UI 1.8.4 autocomplete. I have the select event wired up so when the user chooses an item from the list it calls another JavaScript function that issues an ajax request to save the data and update an XML document.
On the same textbox there is an onBlur event so that if the user manually types the data in and tabs off the textbox without choosing an autocomplete item it also performs the update.
When the user selects an item from the autocomplete list it causes onBlur to fire which overrides the select event, thus the only data that gets updated is whatever is in the textbox that the user typed, and since the select event doesn't fire the contents of the textbox don't get updated.
I've tried using the change event with the same results.
Is there a way to ensure the select event gets fired and also implement some functionality that will emulate an onBlur in the case where a user types the value in rather than selecting it?

The problem is when the user interacts with the autocomplete menu, the textbox loses focus and the blur event fires. There is no way to really detect if the user is in the autocomplete control unless the component tells you that.
If the autocomplete control you are using does not have methods to tell you when it is closed, than you are probably stuck with using a setTimeout to wait a bit before you fire your code.

I think The onselect is always fired
"BUT" its fired only after onblur event of the textbox.
And this happens only when you use the mouse to select the autocomplete item and not through selecting the item by keyboard.
You may undo the update made on onblur with the select event depending on wether mouse click or keyboard select is made.
select: function (event, ui) {
if (event.originalEvent.originalEvent.type == 'click') {
//undo the onblur event happened by an ajax call here
//$("#txtbox").val() will still be available to do an undo
}
//do the actual onselect function here
}