2014-12-01 2 views
0

Я использую jquery-ui autocomplete для извлечения элементов из базы данных SQL, которая работает нормально, но я хотел бы переместить список автозаполнения в другую часть страницы.jquery-ui autocomplete position

Я пытаюсь использовать опцию Position с 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> 
+0

Не могли бы вы поделиться своим попытку с помощью 'position' вариант? –

+0

* «Переместить список автозаполнения в другую часть страницы» * - это очень неопределенное описание проблемы. Просьба описать, что именно вы хотите сделать, что не работает и предоставить неудачную попытку, чтобы мы могли узнать, в чем проблема, с которой вы столкнулись, или лучшее решение –

ответ

0

Я хотел переместить блок автозаполнения в правую часть текстового поля.

После ночи спать моя первая попытка снова утром работала нормально, думаю, что изначально я только пропустил запятую в одной из моих попыток вчера.

Я просто убрал его обратно к базовой реализации, используя массив вместо вызова 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> 
Смежные вопросы