php - Fixing jQuery instant search script tabs -
i have google instant style jquery script uses jquery tab script define search type user wants. currently, no matter tab link click on query web.php?q=query. why be?
<script type="text/javascript"> $(document).ready(function(){ $("#query").keyup(function(){ var query=$(this).val(); var type=$("a").attr("id"); var yt_url=''+type+'.php?q='+query; window.location.hash=''+type+'/'+query+'/'; $.ajax({ type:"get", url:yt_url, datatype:"html", success:function(results){ $('#results').html(results); } }); }); }); </script> <ul> <li><a href='javascript:void(null);' id="web">web</a></li> <li><a href='javascript:void(null);' id="images">images</a></li> <li><a href='javascript:void(null);' id="videos">videos</a></li> <li><a href='javascript:void(null);' id="news">news</a></li> <li><a href='javascript:void(null);' id="social">social</a></li> </ul> <input type='text' id='query'> <div id="results"></div>
you need differentiate clicks keyup. need store request url , change when tabs clicked, need seperate url , data request.
so js be:
$(document).ready(function(){ $("#query").keyup(function(){ var query=$(this).val(); var type='web' //substitute text, default whatever var yt_url=type+'.html'; alert(yt_url); window.location.hash=''+type+'/'+query+'/'; $.ajax({ type:"get", url:yt_url, data: type+"="+query, error: function(a,b,c,d) { $("#results").html("a:"+a+"b: "+b+" c "+c); }, datatype:"html", success:function(results){ console.log("result"+results); } }); }); $("a").click(function() { var query=$("#query").val(); var type=$(this).attr('id'); var yt_url=type+'.html'; window.location.hash=''+type+'/'+query+'/'; $.ajax({ type:"get", url:yt_url, data: type+"="+query, error: function(a,b,c,d) { console.log("a:"+a+"b: "+b+" c "+c); }, datatype:"html", success:function(results){ console.log("result"+results); } }); }) });
Comments
Post a Comment