jquery 自动实现autocomplete+ajax

来公司也差不多一个半月了，一直做点小东西，现在在做公司的出货系统，也只是做来锻炼锻炼的。

好了 不废话了 下面是实现 jquery插件 autocomplete+ajax 自动实现。也是刚学，勿喷。

效果如下：aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZgAAACRCAIAAABxITl+AAAOE0lEQVR4nO2dTW7bSBaAeZa+TB9hbpCVF94YPkHaS8PAbOYIbWcXCYN4M6vGJHGCaKZnBoM0shgj3bAlB7biJAvHkWchWylVvap6pPijR30fCoFcfHosMqwPZJFiFb8BABin6LoBAACrgsgAwDyIDADMg8gAwDzNimwCANA8iAwAzIPIAMA8iAwAzIPIAMA8iAwAzIPIAMA8iAwAzIPIAMA8iAwAzIPIAMA8iAwAzIPI+sPg5Lfdn0/+9Oe/USi7P58MTjIdcH9/f3d3d3vN2N3d3d/fL3vwI7L+8MvbD7/+8fEO4O7u1z8+/vXf48TR8tPe3sHBwdnZ2e2acXZ2dnBw8NPeXqmDH5H1h1/efui6+8AakRbZzs7OeDy+ubn5uGbc3NyMx+OdnZ1SBz8i6w+IDFzSItve3r69ve3aWjK3t7fb29ulDv6WRFYURYk2lQmu/K1qa6klube0rpbULrKiKOpNCG2SFdnXr1+n5SmKQr80HRzj69evBkRWBPhteqgJI0sJIrPl3YlsEuyQWlaKyMBFI7Kr8hRFoQ/IBouYEdlSC5Iiiy2aRDSnF1+NIqvQkrSsq7UNkYGLRmSXOZTHtveV9HezK11HkYX9M9alveAwMgwWP8fiSy0KnaIUjdvyrI8qNDtBKLJFa8OacFEYXyAyy2RFdnNz86EMRVF4/2aD9fUuNzc3ayeysGeGfclvU8lLSzGsskQSAUVOnW7L9WsJm12LyEQfJdwUxiMy09QrsoWAwg+Jr3j0TWRLLdBdWiYUFkZqRLCiyNJ/prfXbaGYZHWRxRxUqh6RmUYjsgsdRVFkP8//nBNbGlaKrKnINF1XrMmKzPuWUmETnS/0IsuuNwwoJTLldulFtthX6XhEZhqNyLIHVdPHtshai8zdEo/Yrgkj0/Hin/Jm1yoyd72aBk8CCXrBYub0Fk0kkS1yuvWF5C8xvkBklsmK7MuXL+90JI5tMTj2LXdpgi9fvqydyMKeWQTCDnu1Vz+JaCXRw7NLxZxhTKIm/We6XtxGZcNieCITheXhOiuMR2Sm0YhM2ZGLQhaFWL+o9JbO/4ylcllHkbn90/sc67RKkS3qY0S3WXfFWkFk+pa0IDL3mNaILKxHZKbRiOytjsSxLQZ7H9w/xa94GBPZRHe2kpZCQnDRbW5MZPqWiJu22MDmRFaqHpGZJiuyz58//1dHURT6+nmleGwnUrl8/vzZjMgSPdZblPZOWZGtkiHbkhhi8uweCIPTIDJwqVdkMWLBac31RGQaN+lFVkof8l5IXiQmKiuTzrC6yO6Wn32tVl8gMstoRPafBiiKovLSOWZE5jdCkoW7NGGQUm5K7YgV9JSQaVn3rdIMfqIELlmRffr06V85lMd2Ns8ilSby06dPayoyaAFEBi4akf1zLUFkGw3vIwOXrMiur6//sZZcX18jss0FkYFL9g2xp6enFxcXb9aMi4uL09NT3hC7ufDOfliQfWf/3t7e/v7++/fvr9eM9+/f7+/v7/HO/o3l3e8Xfz+dUijz8u73i/QB8/jx452dnaZnRSrLzs7O48ePyx78iKxXnJ+fj0ajwWDw5MmTQ9g8njx5MhwOR6PReJw6HesfiKw/nJ2dPXv27OTkZDqdfvv2reuLG+iAb9++TafTk5OT4+Pj8/Pzrg/J9kBk/eHVq1cvX77suivBWvDixYvXr193fUi2ByLrD0+fPp1Op133IFgLrq6uBoNB14dkeyCy/nB0dDSbzbruQbAWzGazo6Ojrg/J9kBk/eHw8LDr7gNrxOHhYdeHZHsgsv6AyMAFkSEykyAycEFkiMwkiAxcEBkiMwkiAxdEhshMgsjABZEhMpMgMnBBZIjMJIgMXBAZIjOJVmRvD378weXHg7e60K2hu2y49YOIlC6VJ8wVLq8tpsS2mweRITKTqETm9+RohxYCK4ksm0dsUT5JhRj1tvcDRIbITKIW2ZJIHnq3bKlEJx9uKSSQz3Mf8X31QUVtMcpt7wuIDJGZpOoY2bw7u6qZOyAjKYXIFHnmIZJFfSWtHiMQbnt/QGSIzCS1iUwhgDuNyBR55JDl1HXFSCCynoDI+kNFkQV9eV6xNVweUgo6ezhGJg5apfMkBLSorStGs+19ApHVRvHoL5TWSiWR3VtGGG0SWOrxclhwYpcMiohkSUB1xai2vU8cHh52fky2VxBZb0oFkUmDWPfdWzpzSnZ6P0STp0uRqQYCLYPIEJnJUlZksZ4sjywprsK8EE2eri4te2+xO0SGyIyWMiJLXVVFun/poXtNni4G+3t+RbkAkSEyk0UtsszpiNzRFWdkXl5VnrYfv9iEU7F7EBkiM1lUIhMeJY0GhQP332uGW16Sh3uT4fNoyTxtPhCr2vb+0JzI5vnDz10WRNabohFZ5Fc6MS2UDAhPdbJ5WvyJknbb+0K3Iku3rf5W2RJZYi80uI+MlDpFFoQKF2O+pCLXa9k8QaqGfjSOyJrohu7nst+ts9gSWTf7yEjhNT7g0pDI5sk1NSH/+3AdBtdTEFlvCiIDl6ZFFn7ospNaEZn7P5RY1Mg+MlIQGbg0IbJ55vRnsVcuAsLIeooVkaX3V2zpRhVEBi61i2yeVtMTE3+GX6ynILLeFEQGLo0+RzZfhT5g8Wf2ixULIutNQWTgsg6PX4R/xuJXLYisNwWRgUuHdy0LxsjSu8/bKdlFG1UQGbg0N9gfI4yMZaj/+LciMkq2IDJwafO3lvM1ZgOyYdULIutNQWTgwo/GEZnJgsjABZEhMpMFkYELIkNkJgsiAxdEhshMFkQGLogMkZksiAxcEBkiM1kQGbggstroetbOzQKRgQsT9CIykyAycEFkiMwkiAxcEBkiM0lJkS2/wl6aNC1EeuN+G3mCxbF5hZXr2ggQGSIziV5kwjQclQTUVp7ItCHLWRCZByJDZCbRiuyhxyd6uDxFd1d5wskwoxNbbqy1BBAZIjOJTmSqqbYVUmgvjzzHeZAakXkgMjMiK4pHTa/CECVmGs9N45iXQpt5JNfN7cYZWYKWRVYUj5T9UR9ZYu12RdbE7jCNfoLerWFm1txwvEkc1eogz3yRpL/sujaN9s/I9P0RkS23HpE5aEQWGxH3er0c5oS0nCcMDc/hsuvaNBAZIjOJQmT3Jz7y7b7E9Z0f0nKe+7Ct4fINTM3gW/7yt7c0IbL5ZZDX7xaVbr0+sp6GIbLeoD4jCwQgD6enQtrMEw6HRQyYWdemUbvIPE/VUllb2xBZb9BfWgYnKYoh9+WQFvNEdKSxlO6ORF9p6NLSO6VK6EkfWUOrEFlv0A/2+31bIQXvzmGLeeSQCuvaNBq6tIx9iH1GZIrWIzKHMs+RCQPu32uGW5En64VHUlvIIz0wW21dmwWXljZE1tCooV3KPtm/RPBEVoj4SGobeTSJlOvaJBod7PeuGVeprKdhdkUGHiV+NJ55bCv0QkQIreVR/Ghcu66NgSf7EZlJeI0PuCAyRGYSRAYuiAyRmQSRgQsiQ2QmQWTggsgQmUkQGbggMkRmEkQGLogMkZkEkYELIkNkJkFk4ILIEJlJEBm4IDJEZhJEBi6IDJGZBJGBCyJDZCZBZOCCyBCZSRAZuCAyRGYSRAYuiMyGyHgfmQciA5caRZaYWyQxw0iiJlZZvYVGRdbo2yaNgsjApS6RZV/3Kga3/LZYqyJb2gZENplMEBks077IspWILNJ6Li0dEBm4ND35iHgJOUn2Sr3+SjfMtMjutwGXTSYTRAbLtDP5yCSwWxgQq4lVVmkbIusNepEpXpGfeUe+tzT1rvzlV+mHk0xGpg0Rm7W82uVcdeXpDfWKLNHLlHNclspZFkTWH3QikxUkzuOdUIJSZGJYUnTRMCFVJZFl8/SGeu9aJmr0c1ymc67UQqMi465lSIkJep2+G9YIU00+VGW6/DzX96DgW1Ka4VZomwBpbksppIY8vaGJwX6xUn+DMp1zFayKbMJzZAEKkcnTc4uzf4tB6f7vh8zzSudNweyXisQ5+dSVpzfUKLLY0H6ph8ganeDSsMjAQyEySS1htdTf/ZMtRW55ZYFv8gKKtFqKqiFPb+DJfkRmkspnZDEHfddZXgGC6BIik9eVHNXaGmZuUdSVpzcgMkRmEs0Y2UNvX9LLfc/2lJO72xgGS+dwZaQZkVBsFN9LXlee3oDIEJlJVHctE7cbgxsAW8Pl+Gh/F687tSLz8V1734LlRKKQm8ljFkSGyEyifo4suLZaPp+StCRa4IHI6JTy0jLWvkVCOX3Ek03kMQoiQ2Qmqfxk/7JbIj072uGjZlIO9mcbpLtD0WQemyAyRGaSiiLzR8jkEbPSfrvTPn4R+553hqi8cm0ij1EQGSIzSRWRSWNE0kOjwjOyTn3MS4oHYodb8p2HzNqDmrry9AhEhshMohRZONyveJJBjsuezeR/oqRclRgm2XfVPD0CkSEyk1QRWVxC6R+NOxGqB1VT0vDlEmlT9vGvuvL0BUSGyEzCa3zABZEhMpMgMnBBZIjMJIgMXBAZIjMJIgMXRGZJZLzGZwEiA5dGRZZ+t082rP72mBYZ7yNzQWTg0rTIvH/FD4nPNbfHrsi8nQiIDFxauLTUvKQfkSXbnZsodAM5OjqazWZddx9YC2az2dHRUdOHHCJbud2ILODp06fT6bTrHgRrwdXV1WAwaPqQU4qMMbJIo5l5ROLNmzcvX77sugfBWvDixYvRaNT0IVf2jKzBllgU2aQtzdtiPB4fHx8/f/788vKSa8zNZDabXV5ePn/+/Pj4eDweN33IIbL6NgCROZyfn49Go8FgcAibymAwGI1GLVhs0vW4mMv/ASkZZVFhDdoLAAAAAElFTkSuQmCC" alt="" />

InCustomer.aspx

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head id="Head1" runat="server">
     <title></title>
     <link href="css/Style.css" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <script type="text/javascript">
    function sele_id(obj) {
        if (obj.value.length >= ) {                                //因为我是根据input值改变而触发事件的，但找到的jq插件里面是规定要两个字符或以上才能触发
            $.ajax({                                                //autocomplete这个插件的，所以我在这里判断一下字符长度为2或以上就执行
                type: "get",
                url: "ajax/SelectCustomID.ashx?comp=" + obj.value,  //是在这个路径下的文件处理逻辑并返回数据
                success: function (data) {
                    var datas = data.split(",");
                    $("#select_id").autocomplete({
                        source: datas
                    });
                },
                Error: function (err) {
                    alert(err);
                }
            });
        }
    }
 </script>
 </head>
 <body>
    <form>
     <input id="select_id" type="text" oninput="sele_id(this)" runat="server" />
    </form>
 </body>

SelectCustomID.ashx

 <%@ WebHandler Language="C#" Class="SelectCompany" %>

 using System;
 using System.Web;
 using i_salesDAL;
 using System.Data;

 public class SelectCompany : IHttpHandler {

     public void ProcessRequest (HttpContext context) {
         context.Response.ContentType = "text/plain";
         //根据传过来的CustomerID 模糊匹配出相关联的
         string com = context.Request.QueryString["comp"].ToString();
         string sql = "select CustomerID from custom where CustomerID like '%" + com + "%'";
         //取得模糊查询的数据源
         DataTable dt = new DataTable();
          dt= DBHelper.GetDataSet(sql);
         //回传数据源
         string data="";
         int i;
         for (i = ; i < dt.Rows.Count; i++)
         {
             //往字符串中添加数据并用,号隔开
             data += dt.Rows[i][] + ",";
         }
         context.Response.Write(data);
     }

     public bool IsReusable {
         get {
             return false;
         }
     }

 }

上面是有个dbhelp

这样就可以实现啦，因为没有修改js文件，所以很多限制都是有的。有兴趣的可以自己改下js css 这样就可以达到自己想要的效果啦。