Scroll in suggestion list for textbox

See more:

Javascript

Ajax

JSON

MVC4

Hello,

I'm working on autocomplete textbox in MVC 4. The suggestion I'm getting is from my database. The problem is that the suggestion doesn't come in a scroll list and it affects the page alignment. The position of other textbox is getting affected. And when i clear the textbox all the suggestion for that particular textbox is shown. i want no suggestion when i clear the textbox.

What I have tried:

code in controller:-

public JsonResult GetSuggest(string technology)
       {



           var cn = new SqlConnection();
           var ds = new DataSet();
           string strCn = ConfigurationManager.ConnectionStrings["Database"].ToString();
           cn.ConnectionString = strCn;
           var cmd = new SqlCommand
           {
               Connection = cn,
               CommandType = CommandType.Text,
               CommandText = "select distinct Domain from files Where Domain like @myParameter and Domain!=@myParameter2"
           };

           cmd.Parameters.AddWithValue("@myParameter", "%" + technology + "%");
           cmd.Parameters.AddWithValue("@myParameter2", technology);

           try
           {
               cn.Open();
               cmd.ExecuteNonQuery();
               var da = new SqlDataAdapter(cmd);
               da.Fill(ds);
           }
           catch (Exception)
           {
           }
           finally
           {
               cn.Close();
           }
           DataTable dt = ds.Tables[0];
           var txtItems = (from DataRow row in dt.Rows
                           select row["Domain"].ToString()
                               into dbValues
                           select dbValues.ToLower()).ToList();

           return Json(txtItems, JsonRequestBehavior.AllowGet);

       }

in view():-

<pre><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
    var textbox;
    var selectValue;

    $(function () {
        textbox = $("#Domain");
        selectValue = $('ul#selectedValue');
        
        textbox.on("input", function () {
            getAutoComplete(textbox.val());
        });
    });
    function getAutoComplete(technology) {
        var uri = "Index/GetSuggest";
        $.getJSON(uri, { technology: technology })
       .done(function (data) {
           selectValue.html("");
           var count = 0;
           $.each(data, function (key, item) {
               //$('<option>').text(item).appendTo('#selectedValue');
               var li = $('<li/>').addClass('ui-menu-item').attr('role', 'menuitem')
                   .html("<a href='#' onclick=\"setText('" + item + "')\">" + item + "</a>")
                   .appendTo(selectValue);
               count++;
           });
       });
    }
    function setText(text) {
        textbox.val(text);
        getAutoComplete(text);
    }

</script>

<input type="text" id="Domain" class="form-control" placeholder="Technology" name="Domain"><br />
                              <ul style="list-style:none" id="selectedValue"></ul>