2012-09-01 82 views
0

我使用jquery-ui-auto-complete-with-multi-values。我的文本框位於頁面的下游,但在頁面上方打開了自動完成菜單。我無法理解這個錯誤。我用jQuery網站上的例子。它是同樣的例子。ASP.NET MVC自動完成位置?

我在頁面上添加jquery和css。可能是什麼問題?

UPDATE

腳本

<style> 
.ui-autocomplete-loading { 
    background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; 
} 
</style> 
<script> 
$(function() { 

    var availableTags; 
    $.ajax({ 
     url: '@Url.Action("GetTags", "Question")', 
     type: 'GET', 
     cache: false, 
     beforeSend: function() { 
      // Show your spinner 
     }, 
     complete: function() { 
      // Hide your spinner 
     }, 
     success: function (result) { 
      availableTags = result; 
     } 
    }); 

    function split(val) { 
     return val.split(/,\s*/); 
    } 
    function extractLast(term) { 
     return split(term).pop(); 
    } 

    $("#tags") 
     // don't navigate away from the field on tab when selecting an item 
     .bind("keydown", function (event) { 
      if (event.keyCode === $.ui.keyCode.TAB && 
        $(this).data("autocomplete").menu.active) { 
       event.preventDefault(); 
      } 
     }) 
     .autocomplete({ 
      minLength: 0, 
      source: function (request, response) { 
       // delegate back to autocomplete, but extract the last term 
       response($.ui.autocomplete.filter(
        availableTags, extractLast(request.term))); 
      }, 
      focus: function() { 
       // prevent value inserted on focus 
       return false; 
      }, 
      select: function (event, ui) { 
       var terms = split(this.value); 
       // remove the current input 
       terms.pop(); 
       // add the selected item 
       terms.push(ui.item.value); 
       // add placeholder to get the comma-and-space at the end 
       terms.push(""); 
       this.value = terms.join(", "); 
       return false; 
      } 
     }); 
}); 
</script> 

控制器

[HttpGet] 
public JsonResult GetTags() 
{ 
    var data = entity.Tags.Select(x => new { label = x.TagName, value = x.TagName }); 
    return Json(data, JsonRequestBehavior.AllowGet); 
} 

剃刀

<div class="demo"> 
    <div class="ui-widget"> 
     @Html.TextBoxFor(x => x.Title, new { @class = "my_text_box", id = "tags" }) 
    </div> 
</div> 
<!-- End demo --> 
<div class="demo-description"> 
    <p> 
     Usage: Enter at least two characters to get bird name suggestions. Select a value 
        to continue adding more names. 
    </p> 
    <p> 
     This is an example showing how to use the source-option along with some events to 
        enable autocompleting multiple values into a single field. 
    </p> 
</div> 

的CSS

.ui-autocomplete { 
    position: absolute; 
    cursor: default; 
} 

ul, menu, dir { 
    display: block; 
    list-style-type: disc; 
    -webkit-margin-before: 1em; 
    -webkit-margin-after: 1em; 
    -webkit-margin-start: 0px; 
    -webkit-margin-end: 0px; 
    -webkit-padding-start: 40px; 
} 

謝謝。

+0

No code to show us? – cspolton

+1

使用firebug來查看正在應用的css,並在網站上修復它 – Shyju

+0

相同的示例。沒有變化。複製粘貼。 –

回答

1

我發現了這個問題。它關於CurCss的jquery-ui版本,我有。在舊版本的jquery-ui中沒有這種方法。我從google-apis獲得了腳本引用。問題現在已解決。

謝謝。