jQuery用戶界面自動完成Ajax和多個值

jQuery UI Autocomplete Multiple Values in Textbox
jQuery UI Autocomplete Multiple Values

沒有成功。我有一個jQuery UI自動完成工作非常好，除了搜索短語與他們的空間。例如，我將搜索「真實」並獲得結果列表，但如果我輸入「房地產」，它會在「真實」之後爆炸。

這裏是我當前的工作代碼最多在文本框中添加一個空格：

<script type="text/javascript">   
$(document).ready(function() {   
    /* auto complete for the menu search option */ 
    $("#txtSearchProgram").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       type: 'GET', 
       url: '/SpecialPages/Program-Autocomplete.aspx', 
       data: { 'searchtext' : encodeURIComponent(request.term), 'langspecific' : '1' }, 
       dataType: 'json', 
       success: function(jsonData) { 
        response(jsonData); 
       } 
      }); 
     }, 
     delay: 0, 
     minLength: 2, 
     open: function() { 
      $(this).autocomplete("widget") 
        .appendTo("#autocomplete-results") 
        .css("position", "static")}, 
     focus: function(event, ui) { 
      $(this).attr("placeholder", ui.item.label); 
      return false; 
     }, 
     select: function (event, ui) { 
      event.preventDefault(); 
      var url = ui.item.value; 
      if (url != '#') { 
       location.href = url; 
      } 
     } 
    }); 
});

下面是一些代碼，我從上面的鏈接嘗試，但繼續收到「遺漏的類型錯誤：無法讀取屬性'自動完成' 的未定義」錯誤

<script type="text/javascript"> 
$(document).ready(function() { 
    /* auto complete for the menu search option */ 
    $("#txtSearchProgram").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       type: 'GET', 
       url: '/SpecialPages/Program-Autocomplete.aspx', 
       data: { 'searchtext' : encodeURIComponent(request.term) }, 
       dataType: 'json', 
       success: function(jsonData) { 
        var re = $.ui.autocomplete.escapeRegex(request.term); // errors out here 
        var matcher = new RegExp("^" + re, "i"); 
        response($.grep(jsonData, function(item){return matcher.test(item.value);})); 
       } 
      }); 
     }, 
     delay: 0, 
     minLength: 2, 
     open: function() { 
      $(this).autocomplete("widget") 
        .appendTo("#autocomplete-results") 
        .css("position", "static")}, 
     focus: function(event, ui) { 
      $(this).attr("placeholder", ui.item.label); 
      return false; 
     }, 
     select: function (event, ui) { 
      event.preventDefault(); 
      var url = ui.item.value; 
      if (url != '#') { 
       location.href = url; 
      } 
     } 
    }); 
});

當我調試它時，我沒有得到更多的細節（不是一個強大的前端開發），而是我已經提到的錯誤。

來源

2016-04-21 Brenden Kehren

我認爲[你應該嘗試這種方式（http://blog.gauffin.org/2011/07/05/jquery-ui-autocomplete-uncaught-typeerror-cannot-read-property-element-不明確/ /使用.php風格 – hmd

不知道@hmd使用「.php風格」將有助於任何事情。正如我所說的第一個代碼塊，除了搜索任何帶有空格的東西外。 –

那麼，你是否比較了'with space'和'without space'的請求標題和響應？它應該與您在瀏覽器的開發人員工具中找到的ajax請求相同。 – hmd

經過進一步測試，我發現問題出在我放置並編碼我的參數的位置。下面的代碼是我開始的：

<script type="text/javascript">   
$(document).ready(function() {   
    /* auto complete for the menu search option */ 
    $("#txtSearchProgram").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       type: 'GET', 
       url: '/SpecialPages/Program-Autocomplete.aspx', 
       data: { 'searchtext' : encodeURIComponent(request.term), 'langspecific' : '1' }, // problem here 
       dataType: 'json', 
       success: function(jsonData) { 
        response(jsonData); 
       } 
      }); 
     }, 
     delay: 0, 
     minLength: 2, 
     open: function() { 
      $(this).autocomplete("widget") 
        .appendTo("#autocomplete-results") 
        .css("position", "static")}, 
     focus: function(event, ui) { 
      $(this).attr("placeholder", ui.item.label); 
      return false; 
     }, 
     select: function (event, ui) { 
      event.preventDefault(); 
      var url = ui.item.value; 
      if (url != '#') { 
       location.href = url; 
      } 
     } 
    }); 
}); 

</script>

這就是我最終的結果。注意我刪除了data屬性並簡單地創建了一個查詢字符串。

<script type="text/javascript">   
$(document).ready(function() {   
    /* auto complete for the menu search option */ 
    $("#txtSearchProgram").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       type: 'GET', 
       url: '/SpecialPages/Program-Autocomplete.aspx?searchtext=' + encodeURIComponent(request.term) + '&langspecific=1', // resolved 
       dataType: 'json', 
       success: function(jsonData) { 
        response(jsonData); 
       } 
      }); 
     }, 
     delay: 0, 
     minLength: 2, 
     open: function() { 
      $(this).autocomplete("widget") 
        .appendTo("#autocomplete-results") 
        .css("position", "static")}, 
     focus: function(event, ui) { 
      $(this).attr("placeholder", ui.item.label); 
      return false; 
     }, 
     select: function (event, ui) { 
      event.preventDefault(); 
      var url = ui.item.value; 
      if (url != '#') { 
       location.href = url; 
      } 
     } 
    }); 
}); 

</script>

來源

2016-05-24 13:01:17

jQuery用戶界面自動完成Ajax和多個值

回答

相關問題