Monday, 3 April 2017

Auto fill Information in text box

HTML
===============
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<style>
    .autofillcon{
            position: absolute;
    z-index: 10000;
    background-color: white;
    cursor: pointer;
    padding: 8px 3px 8px 12px;
    border: 1px solid #dcdcdc;
    width: 100%;
    display:none;
    }
    ul li{
            padding-bottom: 4px;
    }
 ul li:hover, ul li:focus {
     /*background-color: lightgray;*/
 color:lightgray;
}
</style>

<div class="searchBar clearfix">
    <div class="container">
        <label>Search</label>
        <div class="searchBox">
            <input type="text" id="idtext" class="inputSearch"  placeholder="Search Deal By Location/Deal Name / Category" />          
            <a href="javascript:void(0)" class="SearchBtn"><img src="~/Content/images/searchIcon.jpg" alt="" /></a>  
            <ul id="autofile" class="autofillcon">  
         
            </ul>        
        </div>
    </div>
</div>
<!--End SearchBar-->
<script>
    $(document).ready(function () {
        $("#idtext").keyup(function () {
            var value = $('#idtext').val();
            var length = value.length;        
            if (length > 2)
            {
                       $.ajax({
                           type: "post",
                           url: "Home/AutofillInfo",
                           data: { 'Searchkey': value, 'searchBy': 'Autofill', },
                           success: function (response) {                                                  
                               var item = eval("(" + response + ")");
                               var HTML = '';
                               for (var i = 0; i < item.length; i++) {                            
                                   HTML = HTML + "<li onclick=\"$('#idtext').val($(this).text());  $('#autofile').hide().html();\">" + item[i].Remark + "</li>";
                               }
                               $('#autofile').show().html(HTML);
                           }
                       });
            }
         
        });
       
    });
</script>

C#====================
        public string AutofillInfo(string Searchkey, string searchBy = null)
        {
            SearchDeal searchDeal = new SearchDeal();
            string response = string.Empty;
            List<Deal> deal = searchDeal.DealList(Searchkey, searchBy);
            response = JsonConvert.SerializeObject(deal);
            return response;
        }

No comments:

Post a Comment