Question

我正在编写一个具有jqm客户端和web api的应用程序。我需要输入一个使用远程数据源（即web api进来的地方）自动完成的输入。

在运行应用程序时，我似乎没有看到来自web api的可用选项的下拉列表，但是在调试时我可以看到我的服务命中。

下面的示例代码。 JQM。

<!DOCTYPE html>
<html>
<head>
    <title> Autocomplete</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-  1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script>
    $( document ).on( "pageinit", "#myPage", function() {
    $( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
        var $ul = $( this ),
            $input = $( data.input ),
            value = $input.val(),
            html = "";
        $ul.html( "" );
        if ( value && value.length > 2 ) {
            $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
            $ul.listview( "refresh" );
            $.ajax({
                url: "http://myhost/api/manufacturer",
                dataType: "jsonp",
                crossDomain: true,
                data: {
                    term: $input.val()
                }
            })
            .then( function ( response ) {
                $.each( response, function ( i, val ) {
                    html += "<li>" + val + "</li>";
                });
                $ul.html( html );
                $ul.listview( "refresh" );
                $ul.trigger( "updatelayout");
            });
        }
    });
});
    </script>

   <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js">   </script>

</head>
    <body>
        <div data-role="page" id="myPage">
        <div data-role="content">
            <div data-role="fieldcontain">
                <label for="autocomplete">Manufacturer</label>
                <ul id="autocomplete" data-role="listview" data-insert="true" data-filter="true" data-filter-placeholder="Manufacturer Name" ></ul>
            </div>
        </div>
    </div>
</body>

</html>

Web API服务

public class ManufacturerController : ApiController
   {
    List<Manufacturer> manufacturers=new List<Manufacturer>()
    {
        new Manufacturer(){Id = 1, Name = "Audi"},
        new Manufacturer(){Id = 2, Name = "BMW"},
        new Manufacturer(){Id = 3, Name = "Mazda"},
        new Manufacturer(){Id = 4, Name = "Nissan"},
        new Manufacturer(){Id = 5, Name = "Ford"},
        new Manufacturer(){Id = 6, Name = "Mitsubishi"},
        new Manufacturer(){Id = 7, Name = "Toyota"},
        new Manufacturer(){Id = 8, Name = "VolksWagen"},
        new Manufacturer(){Id = 9, Name = "Renault"},
    };


    public IEnumerable<Manufacturer> GetManufacturers()
    {
        return manufacturers;
    }

  }

任何帮助将不胜感激。

嗨所有设法使用jqm.autoComplete-1.5.2-min并且它似乎正在工作，我只有一个问题我似乎无法从Web Api列表中看到实际值。客户端列表仅填充“未定义”的值。见下面的代码

客户端

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> Hyper Finance</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
        $(document).bind('mobileinit', function () {
            $.mobile.selectmenu.prototype.options.nativeMenu = false;
            $.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;
        });
    </script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> </script>
<script src="Scripts/jqm.autoComplete-1.5.2-min.js"></script>
</head>
  <body>
  <div data-role="page" id="mainpage">
    <div data-role="fieldcontain">
        <label for="search">Your city: </label>
        <input type="text" id="search" placeholder="Test">
        <ul id="suggestions" data-role="listview" data-inset="true"></ul>
    </div>
</div>
    <script>
        $("#mainpage").bind("pageshow", function (e) {
            $("#search").autocomplete({
                method: 'GET',
                target: $("#suggestions"),
                source: "http://myhost:38605/api/manufacturer",
                callback: function (e) {
                    var $a = $(e.currentTarget);
                    $("#search").val($a.data('autocomplete').value);
                    $("#search").autocomplete('clear');
                },
                link: 'target.html?term=',
                minLength: 1
            });
        });
    </script>
  </body>
</html>

网络Api保持不变。任何帮助将不胜感激

Jquery移动自动完成远程数据源

0 个答案: