Icons in textbox

[Pratura]

Hi,

can you please share the code on how to have the search and remove icon inside the right portion of the textbox like in the example of your page https://www.syncfusion.com/ebooks

[Arun Palaniyandi]

Hi Pratura,

Thanks for contacting Syncfusion Support. 

 

Based on your shared screenshot and the requirement , we suggest you to try out our Autocomplete control. Hence in this control we have properties called showPopupButton and showResetIcon to show the search icon and cancel icon as per your requirement. 

 

UG Link: https://help.syncfusion.com/js/autocomplete/overview 

 

API Links: 

https://help.syncfusion.com/api/js/ejautocomplete#members:showpopupbutton 

https://help.syncfusion.com/api/js/ejautocomplete#members:showreseticon 

Demo Link: 

http://jsplayground.syncfusion.com/bhnscyon 

 

Online Demo Link: 

https://js.syncfusion.com/demos/web/#!/bootstrap/autocomplete/DefaultFunctionalities 

 

 

Please check the above shared UG Link and API Links about our Autocomplete control and check whether it suits your requirement or not? Also let us know if want any further customization with our Autocomplete. If so we would provide you the further details.  

   

Regards,
Arun P.  

 

[Pratura]

Hi Arun,

thank you for your feedback.

the showPopupButton method on autocomplete control would be great if I could execute custom action (javascript function) on the popup click.

I wouldn't be loading any data to the autocomplete.

Also, I would want to execute the same function on Enter keypress.

Is that possible?

[Arun Palaniyandi]

Hi Pratura,

Thanks for your update. 

 

Yes, your requirements are possible. Hence as per the requirement, we didn’t bind any datasource for the Autocomplete at initial load and through the search icon click and Enter keypress only we have executed the custom javascript function to load the data for the Autocomplete through AJAX. 

 

View: 

        <div> 

 

        <input type="text" id="myautocomplete" /> 

    </div> 

 

    <script> 

        $(function () { 

            $("#myautocomplete").ejAutocomplete({ 

                showPopupButton: true, 

                showResetIcon: true, 

                showEmptyResultText: false, // set this property to show no suggestions 

                width: "50%", 

            }); 

 

            $("span .e-search").click(function () { //bind click event for the search icon 

 

                dosearching();           

 

        }); 

 

            $("#myautocomplete").keypress(function (e) { //bind Enter keypress event  

                if (e.which == 13) { //Enter key pressed 

                    alert('You pressed enter!'); 

                    dosearching(); 

                } 

            }); 

 

 

        }) 

 

        function dosearching() {   // custom JavaScript function 

 

            var strfilter = $('#myautocomplete').val(); 

            $.ajax  //post the searched word through AJAX to find the result 

                ({ 

                    type: "POST", 

                    contentType: "application/json; charset=utf-8", 

                   data: JSON.stringify({ strFilter: strfilter }), 

                    url: "/Autocomplete/GetCARS", 

                    success: function (response) { 

                        var ac = $("#myautocomplete").ejAutocomplete("instance"); 

                        if (response != null && response.length) { 

                            ac.suggestionListItems = response; 

                            ac._doneRemaining(); 

                        } else 

                            ac._hideResult(); 

 

                    } 

 

                }) 

 

        } 

            

    </script> 

 

Controller: 

 

 

public JsonResult GetCARS(string strFilter) 

        { 

            if (strFilter != "") 

            { 

                var Data = setListSource() ; 

                var search = from n in Data where n.text.ToLower().Contains(strFilter.ToLower()) select n; // Filtering based on the searched word 

                return Json(search, JsonRequestBehavior.AllowGet); 

 

            } 

            else 

            { 

                return null; 

 

            } 

        } 

 

 

 

 

 

we have also prepared a sample for your reference below. 

 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/Autocomplete-352114536 

 

 

Please check the above shared sample and let us know if you need any further assistance.  

   

Regards,
Arun P.