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库就不会出问题了。）