在運行時自動完成搜索欄

我試圖在codeigniter中進行自動完成搜索，但問題是當用戶在輸入字段中寫入時第一次打開列表，但沒有根據用戶輸入進行更改。它只在第一時間發生。在運行時自動完成搜索欄

這裏是我的代碼：

<script> 
$(document).ready(function(){ 
    $('#text').keyup(function() { 
    var min_length = 0; 
    var keyword = $('#text').val(); 
    if (keyword.length >= min_length) { 
     $.ajax({ 
     url: 'http://localhost/new/index.php/travels/search_fields', 
     type: 'POST', 
     dataType: 'json', 
     data: { term: $("#text").val()}, 
     success: function(data) { 
      $.each(data, function() { 
      $.each(this, function(k, v) { 
       $("#demo").append("<li>" + v + "</li>"); 
      }); 
      }); 
     } 
     }); 
    } else { 
     $('#demo').hide(); 
    } 
    }); 
}); 
</script>

和查詢是：

function search_field($country_id){ 
    $this->db->distinct(); 
    $this->db->select("destination"); 
    $this->db->from('travels_detail'); 
    $this->db->like('destination', $country_id); 
    $query = $this->db->get(); 
    return $query->result();

來源

2016-11-21 Harris Khan

- 您可以正確摺疊您的代碼:)我無法編輯，因爲編輯處於待處理狀態。 - 2 - 我不確定你的代碼在PHP中，你使用哪個數據庫？ 'like'可能與'％'一起表示字符串沒有完成。 '$ this-> db-> like（'destination'，$ country_id。'％'）;'你可以console.log得到$ each（data，...）的結果嗎？我會幫你的。 '$（「＃demo」）。append'，所以你追加，你永遠不會清除'$（'＃demo'）'？ –

你真的碰到了一些最具挑戰性的問題與AJAX在這裏，即取消請求的問題以及請求可以以任何順序完成的事實。

假設用戶在搜索字段中鍵入'123'。然後你會發出三個請求：'1'，'12'和'123'。

在這個時間點上，您不再對前兩個請求的結果感興趣。然而事實證明，編寫正確處理這個問題的代碼可能會非常棘手。另一個問題是，這些請求可能會在訂單中完成任何訂單。例如，假設請求以相反的順序完成（第3，第2，第1）。那麼你可能最終只顯示第一個請求的結果，而不是第三個，這是你真正想要的結果。

處理此問題的方法之一就是使用Promises。您可以在該主題here中找到一個很好的介紹。這種問題的一個很好的解決方案是RxJS庫。這是一個非常好的庫，可以讓您將異步集合處理爲流。 RxJS存儲庫中甚至有一個autocomplete example。然而，Rx是一個龐大的函數庫和幾個新概念的圖書館，最好先開始感受Promise。

來源

2016-11-21 13:35:47 Nico

在運行時自動完成搜索欄

回答

相關問題