1. Home
  2. Forum
  3. jQuery
  4. Icons in textbox

Icons in textbox

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




3 Replies
AP Arun Palaniyandi Syncfusion Team February 5, 2018 04:40 PM UTC

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. 
 
 
API Links: 

Demo Link: 
 
Online Demo Link: 
 
 
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.  
 


PR Pratura February 6, 2018 02:26 PM UTC

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?



AP Arun Palaniyandi Syncfusion Team February 7, 2018 01:28 PM UTC

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. 
 
 
 
Please check the above shared sample and let us know if you need any further assistance.  
   
Regards,
Arun P.  



Loader.
Up arrow icon