自动完成 json答案

【问题标题】：autocomplete json自动完成 json
【发布时间】：2021-03-10 12:55:33
【问题描述】：

我已经关注autocomplete和datepicker的后续浪潮，但自动完成无法正常工作其次是否有任何razor syntax 显示日期选择器和自动完成

javascript文件

/// <reference path="jquery-1.5.1-vsdoc.js" />
/// <reference path="jquery-ui-1.8.11.js" />

$(document).ready(function () {
    $(":input[data-autocomplete]").each(function () {
        $(this).autocomplete({ source: $(this).attr("data-autocomplete") });
    });
    $(":input[data-datepicker]").datepicker();    
})

查看文件

    @model TestDateTimePicker.Models.TestClass

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>TestClass</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.City)
        </div>
        <div class="editor-field">
            <input data-autocomplete="@Url.Action("AutoComplete", "City","City")" class="text-box single-line" id="City" name="City" type="text" value="" />                        
            @Html.ValidationMessageFor(model => model.City)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Date)
        </div>
        <div class="editor-field">            
            <input class="text-box single-line" data-val="true" data-val-required="The Date field is required." id="Date" name="Date" type="text" value="" data-datepicker="true"/>
            @Html.ValidationMessageFor(model => model.Date)            
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>



  }

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Json 控制器

public ActionResult AutoComplete(String s)
        {
            var d = db.Cities
                .Where(r => r.Name.Contains(s))
                .Select(r => new { label = r.Name });            
            return Json(d, JsonRequestBehavior.AllowGet);
        }

【问题讨论】：

您是否收到任何 JavaScript 错误？您可以直接在浏览器中请求自动完成操作吗？它是否返回有效的 JSON？
没有显示为自动完成
如何验证 JSON 是否有效
那么 JSON 结果可能是空的？

标签： asp.net-mvc-3 autocomplete razor jquery-autocomplete jquery-ui-autocomplete

【解决方案1】：

@Url.Action("AutoComplete", "City", "City")

应该是

@Url.Action("AutoComplete", "City")

您使用的第三个参数表示必须是匿名对象而不是字符串的路由值。就自动完成插件而言，它在执行 AJAX 请求以获取数据时使用 term 查询字符串。因此，您还必须重命名控制器操作参数：

public ActionResult AutoComplete(string term)
{
    var d = db.Cities
              .Where(r => r.Name.Contains(term))
              .Select(r => new { label = r.Name });            
    return Json(d, JsonRequestBehavior.AllowGet);
}

还要确保在您的页面中引用了 jquery-ui-1.8.11.min.js 脚本（在您的代码示例中看不到它）。

如果仍然无法正常工作，请确保自动完成操作在执行查询时不会引发异常。如果没有一些 javascript 错误并且正确发送了 AJAX 请求，还请查看 FireBug 或开发者工具。

【讨论】：

【解决方案2】：

<html>
    <head>
            <title>Ajax</title>
            <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
            <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
            <script>
                 $(function() { 
                    $("#myname").autocomplete({
                      source: 'emp.php',
                      select: function (event, ui) {
                        $("#myname").val(ui.item.label);
                        $("#myid").val(ui.item.id);
                    },
                       minLength: 0,
                       autoFocus: true,
                    }); 
                });
            </script>
    </head>
    <body>
        <h2>Ajax Testing</h2>
        <input  name="myname" id="myname" type="text">
        <input  name="myid" id="myid" type="text">
    </body>
</html>
-------------- Below is the code of PHP for emp.php page --------------------------
<?php
require_once 'connection.php';
$query  = "SELECT myname as label , myid as id  FROM emp WHERE name LIKE ? ORDER BY name";
$rsTable = sqlsrv_query($conn, $query,array('%'.$_REQUEST['term'].'%'));
while ($row_rsTable = sqlsrv_fetch_array($rsTable, SQLSRV_FETCH_ASSOC)) {

    $emparray[] = preg_replace('/[\x00-\x1F\x80-\xFF]/', '', $row_rsTable);
}
echo json_encode($emparray);
sqlsrv_close($conn);
?>

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助、质量更好，并且更有可能吸引投票