在mvc中使用jquery自動完成文本框

-1

我已經實現了使用ajax結果在文本框中自動完成的代碼。我用下面的代碼來實現在文本框中自動完成在mvc中使用jquery自動完成文本框

HTML：

<div class="form-group col-xs-15"> 
     <input type="text" class="form-control" id="tableOneTextBox" placeholder="Value" > 
</div> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

SCRIPT：鑑於

$("#tableOneTextBox").autocomplete({ 
     source: function (request, response) { 
      var tableDetails = 
      { 
       TextBoxValue: $("#tableOneTextBox").val() 
      } 
      $.ajax({ 
       type: "POST", 
       url: domainName + "api/autocompletetextbox", 
       data: tableDetails, 
       success: function (data) { 
        response($.map(data, function (item) { 
         return { label: item, value: item }; 
        })) 
       } 
      }); 
     } 
    });

呈現的HTML：

<input type="text" class="form-control ui-autocomplete-input" id="tableOneTextBox" placeholder="Value" autocomplete="off"> 
<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0" style="display: block; width: 217px; top: 188px; left: 760px;"> 
<li class="ui-menu-item" id="ui-id-2" tabindex="-1">01 - Chennai</li> 
<li class="ui-menu-item" id="ui-id-3" tabindex="-1">02 - Coimbatore</li> 
<li class="ui-menu-item" id="ui-id-4" tabindex="-1">03 - Kanchipuram</li> 
<li class="ui-menu-item" id="ui-id-5" tabindex="-1">08 - Bharuch</li></ul> 
<span role="status" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>4 results are available, use up and down arrow keys to navigate.</div></span>

問題

呈現的值，但不顯示建議列表的視圖。請幫幫我。我已經嘗試了很多例子。請讓我知道你的建議，這將對我有幫助。

來源

2017-09-06 Arun D

你已經包含了相關的css文件？ –

是的增加請發現問題我已經在HTML中使用CSS。請讓我知道，如果你有任何其他的CSS列表。 @StephenMuecke –

你有錯誤的順序腳本 - 'jquery'需要是第一個 –

把jQuery的庫以正確的順序，如：

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

，然後再試一次，因爲所有其他庫都是基於jquery，所以它必須在應用程序中的第一個庫。

來源

2017-09-06 06:45:28

我已經使用腳本作爲你說的也不工作。 @Mayanak –

控制檯中的任何錯誤？ –

沒有錯誤顯示@ Mayank –

對不起，我已經錯過了更改下面的事情，

改變Z-指數。

$(".ui-front").css("z-index","10000");

現在自動完成工作的罰款如下圖像

來源

2017-09-06 07:16:33

在mvc中使用jquery自動完成文本框

回答

相關問題