javascript - 在mvc中使用jquery自动完成文本框

标签 javascript jquery ajax asp.net-mvc autocomplete

我已经使用ajax结果在文本框中实现了自动完成代码。我使用下面的代码在文本框中实现自动完成

HTML:

<div class="form-group col-xs-15">
      <input type="text" class="form-control" id="tableOneTextBox" placeholder="Value" >
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

脚本:

 $("#tableOneTextBox").autocomplete({
        source: function (request, response) {
            var tableDetails =
            {
                TextBoxValue: $("#tableOneTextBox").val()
            }
            $.ajax({
                type: "POST",
                url: domainName + "api/autocompletetextbox",
                data: tableDetails,
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item, value: item };
                    }))
                }
            });
        }
    });

View 中呈现的 html:

<input type="text" class="form-control ui-autocomplete-input" id="tableOneTextBox" placeholder="Value" autocomplete="off">
<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0" style="display: block; width: 217px; top: 188px; left: 760px;">
<li class="ui-menu-item" id="ui-id-2" tabindex="-1">01 - Chennai</li>
<li class="ui-menu-item" id="ui-id-3" tabindex="-1">02 - Coimbatore</li>
<li class="ui-menu-item" id="ui-id-4" tabindex="-1">03 - Kanchipuram</li>
<li class="ui-menu-item" id="ui-id-5" tabindex="-1">08 - Bharuch</li></ul>
<span role="status" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>4 results are available, use up and down arrow keys to navigate.</div></span>

问题

已呈现值,但未显示类似建议列表的 View 。请帮我。 我已经尝试过很多例子。请让我知道您的建议,这对我很有帮助。

最佳答案

按照正确的顺序放置 jquery 库,例如:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

然后再试一次,因为所有其他库都基于 jquery,因此它必须是应用程序中的第一个库。

关于javascript - 在mvc中使用jquery自动完成文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46068380/

相关文章:

javascript - PHP Cookie 未通过 AJAX 设置

javascript - 如何在页面加载后将日期选择器值设置为所选日期?

javascript - Zurb Foundation 4 和同位素布局问题(某些浏览器)

jquery - SignalR 是否适合替代 jQuery Ajax(或类似的)

javascript - 如何在 Javascript 中从数组构建对象

javascript - jQuery $(this) 不起作用

php - 在 ajax 调用中使用 TCPDF 生成 PDF

javascript - Angular 5, Angular Material : Datepicker validation not working

javascript - 平安 express + sequelize server with chai-http

javascript - 这个字符/运算符在 javascript/jquery 选择中意味着什么?