how to show employee code in ajax when i click extender

Question

Hi friends In ajax auto complete extender having both employee code and employee name when i click employees i will show only employee code how to do this example 015[john] 012[peter] when i click 015[john] only employee code is goes to textbox how to do!!! help mee plz

Tamal Marick · Answer

If you ever want a user's selection on an AutoComplete control to trigger a post back to your web server, you will immediately notice that the control does not contain a built in server event for this action. Fortunately for us, however, the control does have a client side event. We can use this client side event to send the selected value to the server through a hidden control using JavaScript. This example uses an UpdatePanel because most applications that use an Ajax based control to select a value will also expect that the page will not refresh once a selection is made. The UpdatePanel, however, is not needed. The web controls in our example can be laid out very simply: behaviorid="AutoCompleteEx" id="autoComplete1" targetcontrolid="myTextBox" servicepath="AutoComplete.asmx" servicemethod="GetCompletionList" scriptpath="AutoCompleteBehavior.js" minimumprefixlength="2" completioninterval="1000" enablecaching="true" completionsetcount="20" delimitercharacters=";, :" showonlycurrentwordincompletionlistitem="true" > Of particular importance is the OnClientItemSelected attribute to the autocomplete control. This property indicates that the OnContactSelected JavaScript function will be called when the user makes a selection. The implementation of our method differs from that of the original article because it sets our hidden field value and causes a postback of the form. function OnContactSelected(source, eventArgs) { var hdnValueID = " "; document.getElementById(hdnValueID).value = eventArgs.get_value(); __doPostBack(hdnValueID, ""); } The above JavaScript function sets the value of our hidden field, and uses that same hidden field as the impetus of the ASP.NET framework's __doPostBack call. Because the hidden field has a handler for the OnValueChanged event, the code will call the following event handler on the server side. We can use this event to look up further information from some persistent store, update other fields on the page, or any other needed functionality. protected void hdnValue_ValueChanged(object sender, EventArgs e) { string selectedWidgetID = ((HiddenField)sender).Value; Widget w = MyEntityService.GetWidget(selectedWidgetID); ///populate the form based on retrieved data } Instaed of OnClientItemSelected="GetID", you need to use onclientitemselected="OnContactSelected", otherwise you need to change function name. https://www.codeproject.com/Articles/71338/Using-the-AutoComplete-Extender-to-Automatically-P

Nandha Kumar Nagarajan · Answer

ServiceMethod="GetsearchScode" CompletionInterval="1000" MinimumPrefixLength="1" CompletionSetCount="1" EnableCaching="true" CompletionListHighlightedItemCssClass="ACE_li_highlight" CompletionListCssClass="ACE_ul" CompletionListItemCssClass="ACE_li" OnClientItemSelected="GetID">

Tamal Marick · Answer

Could you show me your ajax code as well?

Nandha Kumar Nagarajan · Answer

sorry i cant understand i am not using MVC. here is my code public static List GetsearchScode(string prefixText, int count) { DL.DBUtility dbUtility; DL.SQLParams sqlParams; dbUtility = new DL.DBUtility(); sqlParams = new DL.SQLParams(); sqlParams.Add("@N_QUERY_ID", SqlDbType.Int, 5); sqlParams.Add("@VC_SEARCH_TEXT", SqlDbType.VarChar, prefixText); DataTable dt = dbUtility.ExecuteDataTable(Procedure.USP_HRM_EMPLOYEE_INACTIVE_LOGIN, sqlParams.GetParams); List code = new List (); foreach (DataRow dr in dt.Rows) { code.Add(dr["EMPLOYEE_CODE"].ToString()+ "["+dr["EMPLOYEE_NAME"].ToString()+"]"); } sqlParams.Dispose(); return code; } when i click that i goes to 014 only in textbox

Nandha Kumar Nagarajan · Answer

can you explain briefly?

Tamal Marick · Answer

Hi Nandhakumar, The select event occurs before the field is updated. You can try this: select: function(event, i) { var selecttext = i.item.val; this.value = selecttext.match(/\d+/g); return false; }