滚动文本框的建议列表 [英] Scroll in suggestion list for textbox

问题描述

你好，



我正在研究MVC 4中的自动完成文本框。我得到的建议来自我的数据库。问题是该建议没有出现在滚动列表中，它会影响页面对齐。其他文本框的位置受到影响。当我清除文本框时，会显示该特定文本框的所有建议。当我清除文本框时，我不想要任何建议。



我尝试过：


控制器中的
代码： -

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（）： -

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>

推荐答案

（ function （）{
textbox =

(function () { textbox =

（ #Domain）;
selectValue =

("#Domain"); selectValue =

（' ul＃selectedValue' ）;

textbox.on（ input， function （）{
getAutoComplete（textbox.val（））;
}）;
}）;
function getAutoComplete（technology）{
var uri = Index / GetSuggest;

('ul#selectedValue'); textbox.on("input", function () { getAutoComplete(textbox.val()); }); }); function getAutoComplete(technology) { var uri = "Index/GetSuggest";

这篇关于滚动文本框的建议列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！