在mvc中使用jquery自动完成文本框[关闭]答案

【问题标题】：Auto complete for text box using jquery in mvc [closed]在mvc中使用jquery自动完成文本框[关闭]
【发布时间】：2018-02-14 12:59:06
【问题描述】：

我已经使用 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 };
                    }))
                }
            });
        }
    });

呈现的 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>

问题

值已呈现，但未显示建议列表之类的视图。请帮我。我已经尝试了很多例子。请让我知道您的建议，这对我很有帮助。

【问题讨论】：

你是否包含了相关的css文件？
是的，请找到我在 html 中使用 css 的问题。如果您有任何其他 css 列表，请告诉我。 @StephenMuecke
您的脚本顺序错误 - jquery 需要排在第一位
我也使用了您所说的脚本，但无法正常工作。 @StephenMuecke
什么不起作用。您在浏览器控制台中遇到什么错误？

标签： javascript jquery ajax asp.net-mvc autocomplete

【解决方案1】：

按正确的顺序放置 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，所以它必须是您应用程序中的第一个库。

【讨论】：

我也使用了您所说的脚本，但无法正常工作。 @Mayanak
控制台有错误吗？
没有错误显示@Mayank

【解决方案2】：

对不起，我错过了下面的东西，

更改了 Z 索引。
```
$(".ui-front").css("z-index","10000");
```

现在自动完成工作正常，如下图所示

【讨论】：