在javascript函數中使用搜索框

我試圖在搜索框中輸入一個值，並將該值用作另一個函數的參數，但每次單擊按鈕時，當頁面刷新時，全局變量會重置自身。在javascript函數中使用搜索框

這是我在我的javascript代碼：

var searchTags; 

function DoSearch() 
{ 
    searchTags = $('#squery').val(); 
} 

dataservices.pictureFeedService.searchForPictures(searchTags, function (data) { 
    dataservices.picturesLayoutService.buildPicturesLayout("images", data); 
});

和HTML代碼在我的索引我的搜索框旁邊：

<form id="custom-search-form" class="form-search form-horizontal"> 
     <div class="input-append span2 offset5"> 
      <input id="squery" type="text" class="search-query" placeholder="Search"/> 
      <button type="submit" onclick="DoSearch();" class="btn"><i class="icon-search"></i></button> 
     </div> 
</form>

我在我的節目3個JS文件：這個js代碼在main.js中，另一個js文件中我使用dataservices.pictureFeedService和dataservices.picturesLayoutService，以及最後一個js文件，我只有這個：

dataservices = {};

來源

2013-12-23 Razziel

您的輸入是實際提交併刷新頁面的表單嗎？你怎麼知道它重置自己。你的dataservices函數如何被調用？爲什麼不把它稱爲功能而不是外部。 – Leeish

_頁面刷新時，全局變量會自行重置。是的，這通常是JS變量發生的情況。 – putvande

你不需要提交表格。從'button'中刪除'type =「submit」' – AbsarAkram

$('#custom-search-form button[type="submit"]').click(function(e){ 
    e.preventDefault(); 
    dataservices.pictureFeedService.searchForPictures($('#squery').val(), function (data) { 
     dataservices.picturesLayoutService.buildPicturesLayout("images", data); 
    }); 
}

來源

2013-12-23 18:39:33 Leeish

它不適用於我的程序:(請閱讀我以前的評論 – Razziel

我根據您的意見編輯了 – Leeish

對不起，您的解決方案很好，但是您沒有掌握所有信息，這是我的錯，我沒有非常瞭解javascript – Razziel

要停止刷新頁面，您需要阻止表單提交。

var form; 

    // get your form's id 
    form = $('#yourformid'); 

    form.submit(function(event) { 
     // stop form from submitting 
     event.preventDefault(); 

     var value; 

     // get search term 
     value = $('#squery').val(); 

     // add your code here to do whatever with your input's value 

    });

來源

2013-12-23 19:09:39 Tomas

@Razziel，就像我對你的帖子的第一條評論。即使您沒有提供任何操作，表單也會默認提交到該頁面。 – Leeish

偉大的解決方案，這比我的Onclick功能更好。非常感謝^^ – Razziel

爲什麼不使用javascript的onkeyup事件。您可以逐字符讀取文本框的值，然後使用ajax在數據庫中搜索相關結果。

function search(){ 
     var d =document.getElementById('display'); 
     var a = document.getElementById('txt').value; 
     if(a){ 

     var x = new XMLHttpRequest(); 

     x.onreadystatechange = function(){ 

      if(x.readyState==4&& x.status==200){ 

       document.getElementById('display').innerHTML = x.responseText; 
       d.style.display = "block"; 
      } 

     } 
     x.open('GET','ajax.php?search='+a,true); 
     x.send(); 

     }else{ 
      d.style.display = "none"; 
     } 
    } 

</script> 
<style> 
    #display{ 
     border: solid medium black; 
     width: 200px; 
     display:none; 

    } 

</style> 


<input type="text" id = 'txt' name="keyevent" onkeyup="search();" value="search" required>Search 

<div id="display"></div>

來源

2013-12-24 08:49:05 freerunner

在javascript函數中使用搜索框

回答

相關問題