jqAutoComplete 和 knockout

jqAutoComplete:自动补全查询

jqAutoPage.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/BlackSkinMaster.Master" AutoEventWireup="true" CodeBehind="jqAutoPage.aspx.cs" Inherits="BlackSkin.Pages.jqAutoPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <!--
        cat66:jqAutoComplete插件使用方法
    -->
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="mainContent" runat="server">
    <div>
        select:<input id="selectFruit" data-bind="value:fruit"/>
    </div>
    <span data-bind="text:fruit"></span>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="foot" runat="server">
    <script type="text/javascript">
        require(['jquery','knockout','jqAutoComplete','jquery.ui'], function ($,ko,jqAuto) {
            //$("body").css("background-color", "pink");

            $(function () {
                var fruits = [
                    "Apple",
                    "Banana",
                    "Pear",
                    "Grape"
                ];
                $("#selectFruit").autocomplete({
                    source:fruits
                })
            });

            function ViewModel() {
                var self = this;
                self.fruit = ko.observable('');
            }
            ko.applyBindings(new ViewModel());
        })
    </script>
</asp:Content>

BlackSkinMaster.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="BlackSkinMaster.master.cs" Inherits="BlackSkin.BlackSkinMaster" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!--css-->
    <link href="Content/bootstrap.css" rel="stylesheet" />

    <!--js-->   
    <script src="../Scripts/require.js"></script>
    <script src="../Scripts/requirejs-config.js"></script>
    <script src="../Scripts/jquery-1.8.3.js"></script><!--加上这条就不出现问题：Uncaught ReferenceError: jQuery is not defined-->

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="mainContent" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>

    <asp:ContentPlaceHolder ID="foot" runat="server">

    </asp:ContentPlaceHolder>
    
</body>
</html>

requirejs-config.js

requirejs.config({
    paths: {
        jquery: '../Scripts/jquery-1.8.3',
        'jquery.ui':'../Scripts/jquery-ui-1.9.2',
        jqAutoComplete: '../Scripts/jqAutoComplete',
        knockout:'../Scripts/Knockout-3.3.0'
    }
});

注意：

1.master和requirejs-config里面的路径都是相对于页面的

2.autocomplete() 属于jQuery UI下的扩展方法

遇到的问题：

1.Uncaught ReferenceError: jQuery is not defined

（解决:1.清除下缓存就可以了。

　　　2.在Master里面引入jquery库就不会出问题了。）