How to implement Auto-fill behavior for search in custom Web Part in SharePoint

Question

I am trying to implement Auto-fill behavior for search in custom Web Part in SharePoint here I have to read data either from SharePoint list or SQL Server database table. Here I can implement these both approaches individually which is not what I want, I want to implement these both approaches together. Is there any solution out there for such case?

Answer 1

Accomplished it through ajax-call functionality, which I have implemented through application page. here is my HTML

<div>
<label  for="txtSearch">Search</label>
<input placeholder="Search" class="form-text searchbox" type="text" id="txtSearch" maxlength="255" tabindex="0" autocomplete="off">
</div>

here is my js code for ajax call

function SearchText() {
    $("#txtSearch").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/_layouts/15/searchText/applicationpage.aspx/GetAutoCompleteData",
                data: "{'searchText':'" + $("#txtSearch").val() + "'}",
                dataType: "json",
                success: function (data) {
                    response(data.d);
                },
                error: function (result) {
                    alert("Error");
                }
            });
        }
    });
}

and the server site code template would be as like below

[WebMethod]
        public static List<string> GetAutoCompleteData(string searchText)
        {

            if (SQL Table)
            {
                -----------------------------
                ----------------------------
                  ------------------------
            }
            else if (Sharepoint List)
            {
               -----------------------------
                ----------------------------
                ------------------------
            }
            return result;
        }