jquery-ui自動完成位置

我正在使用jquery-ui自動完成從SQL數據庫檢索項目工作正常，但我想將自動完成列表移動到頁面的另一部分。jquery-ui自動完成位置

我一直在嘗試使用here中的位置選項，但在應用於我的代碼時似乎無法獲得正確的語法？

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("#txtCity").autocomplete({ 
      source: function (request, response) { 
       var param = { cityName: $('#txtCity').val() }; 
       $.ajax({ 
        url: "test.aspx/GetCities", 
        data: JSON.stringify(param), 
        dataType: "json", 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        dataFilter: function (data) { return data; }, 
        success: function (data) { 
         response($.map(data.d, function (item) { 
          return { 
           value: item 
          } 
         })) 

        }, 

        error: function (XMLHttpRequest, textStatus, errorThrown) { 
         alert(textStatus); 
        } 
       }); 
      }, 
      select: function (event, ui) { 
       event.preventDefault(); 
       minLength: 2//minLength as 2, it means when ever user enter 2 character in TextBox the AutoComplete method will fire and get its source data. 
      } 


     }); 
    }); 

    </script>

來源

2014-12-01 prwilliams1982

你能分享您在使用'position'選項嘗試？ – 2014-12-01 17:48:29

*「將自動完成列表移動到頁面的另一部分」* - 是一個非常模糊的問題描述。請描述你想要做什麼，什麼不工作，並提供失敗的嘗試，以便我們可以找到你遇到的問題或更好的解決方案 – 2014-12-01 17:55:54

我想將自動填充框移到文本框的右側。

經過一個晚上的睡眠，我今天早上第一次嘗試再次正常工作，認爲我原本只在昨天的一次嘗試中錯過了一個逗號。

我剛剛使用數組而不是ajax調用將其剝離回基本實現，然後將工作語法應用於我的代碼。

浪費太多的時間在這個昨天FAR太多了，只是表明退後一步，離開屏幕的時間有助於解決問題！

感謝您的幫助

工作代碼備案：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="_Default" %> 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>JQuery AutoComplete TextBox Demo</title> 
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" /> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div><h1>AutoComplete Textbox</h1> 
Software 
<asp:TextBox TextMode="multiline" Columns="50" Rows="5" ID="txtCity" runat="server"></asp:TextBox> 
</div> 
</form> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("#txtCity").autocomplete({ 
     source: function (request, response) { 
      var param = { cityName: $('#txtCity').val() }; 
      $.ajax({ 
       url: "test.aspx/GetCities", 
       data: JSON.stringify(param), 
       dataType: "json", 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       dataFilter: function (data) { return data; }, 
       success: function (data) { 
        response($.map(data.d, function (item) { 
         return { 
          value: item 
         } 
        })) 

       }, 

       error: function (XMLHttpRequest, textStatus, errorThrown) { 
        alert(textStatus); 
       } 
      }); 
     }, 
     position: { 
      my: "left center", 
      at: "right center", 
     }, 
     select: function (event, ui) { 
      event.preventDefault(); 
      minLength: 2//minLength as 2, it means when ever user enter 2 character in TextBox the AutoComplete method will fire and get its source data. 
     } 
    }); 
}); 


</script> 
</body> 
</html>

來源

2014-12-02 10:07:29 prwilliams1982

jquery-ui自動完成位置

回答

相關問題