How to code navigation key on instant search results? - javascript

This is my code:
Html :
<input onkeyup="showResult(this.value)" id="tsearch" class="search-query form-control" type="text" placeholder="Search here ..." name="tsearch"></input>
<div id="livesearch" style="border: 0px none;">
Script :
<script>
function showResult(str) {
if (str.length == 0) {
document.getElementById("livesearch").innerHTML = "";
document.getElementById("livesearch").style.border = "0px";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("livesearch").innerHTML = xmlhttp.responseText;
document.getElementById("livesearch").style.border = "1px solid #A5ACB2";
}
}
xmlhttp.open("GET", "livesearch.php?q=" + str, true);
xmlhttp.send();
}
</script>
livesearch.php is returning the results once input is provided in the search box. What changes I have to make in the above code so that it provides navigation key support on the search results and remove the results once mouse is pressed in any other area of the page?
Thanks in advance.

You could put all particular search results inside their own DIV container as children of you #livesearch DIV.
Inside you keyup function use the function's event paramenter to fetch the keyCodes for arrow up and down:
left = 37
up = 38
right = 39
down = 40
Then use another function to focus the desired search result.
Hope this helps.

Related

AJAX magnific Popup not initialising after xmlhttprequest

I have a page containing a list of events, generated by a DB query, that the user can, for each event, click a button to register for the event. This fires a registration form (contained on event-registration.php) which is displayed via AJAX Magnific popup.
On normal pageload, the popup fires as expected as an AJAX type with the form embedded within the popup.
<a href='event-registration.php?eid=".$myrow['EID']."' class='ajax-popup-link' title='".$myrow['Tooltip']."' ><button type='button' class='".$myrow['StatusCSS']." buttonWrap'>".$myrow['StatusName']."</button></a>
$(document).ready(function() {
$('.ajax-popup-link').magnificPopup({
type: 'ajax',
cursor: 'mfp-ajax-cur',
closeOnContentClick: false
});
});
However, the results also have a couple of filters that can be applied, based on type of event, location etc. These are handled by XMLHTTP requests to dynamically filter the search results without having to reload the whole page.
<select id="EventLocation" onchange="filterEventsLocation(this.value)" class="filter">
<option value="">Filter by Event Location</option>
<option value="1">Scotland</option>
<option value="2">North of England</option>
<option value="3">Midlands</option>
<option value='4'>London & South East</option>
<option value='5'>South West</option>
<option value="reset">Reset (Show All)</option>
</select>
function filterEventsLocation(str) {
if (str == "" || str == "reset") {
document.getElementById("EventsList").innerHTML = xmlhttp.responseText;
xmlhttp.open("GET", "prt.getEvents.php", true);
xmlhttp.send();
/*document.getElementById("EventsList").innerHTML = "";
return;*/
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("EventsList").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","prt.getEvents.php?l="+str,true);
xmlhttp.send();
}
prt.getEvents.php contains the SQL query code as well as a div 'EventsList' which then displays the query results.
However, once a filter is applied, the popup box no longer works, instead when the user clicks the button they're just taken straight to the event-registration.php file with no sign of magnific popup at all.
Does anyone have any ideas why the popup isn't initialising once the filter has been applied to the list of events?
UPDATED JAVASCRIPT ADDING EVENT LISTENER:
function filterEventsType(str) {
if (str == "" || str == "reset") {
document.getElementById("EventsList").innerHTML = xmlhttp.responseText;
xmlhttp.open("GET", "prt.getEvents.php", true);
xmlhttp.send();
/*document.getElementById("EventsList").innerHTML = "";
return;*/
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("EventsList").innerHTML = xmlhttp.responseText;
document.getElementById("RegisterBox").addEventListener("onclick", openPopup);
function openPopup() {
$('.open-popup-link').magnificPopup({
type: 'inline',
midClick: true })
}
}
};
xmlhttp.open("GET","prt.getEvents.php?t="+str,true);
xmlhttp.send();
}
}

show result dynamically in search box

I want a search box which shows the result just below it when I click the search button without reloading the page.
for this I've js function called ShowUsers(str)
like this
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
document.getElementById("txtHint").innerHTML =
xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
And a html form like this :
<form>
<input type="text" name="q"/>
<script type="text/javascript">var x = document.getElementById("q").value; </script>
<input type="button" value="search" onclick="showUser(x)">
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
I've one php file to show the result called as GetUser.php
I think the var x deos'nt pass to the ShowUser(str) function in the input tag I think this is not a right way to pass a js var into html event
so what can i do to show the data
Access document.getElementById("q").value directly in showUser function rather than passing x to showUser function.
function showUser() {
var str = document.getElementById("txtHint").value;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
document.getElementById("txtHint").innerHTML =
xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}

Change input autocomplete value

I have another question: Is there any way to change input autocomplete value dynamically with javascript?
Example:
<input id="myInput"
placeholder="Write something here..."
onchange="changeAutocompleteValue(event)">
<script>
function changeAutocompleteValue(event)
{
var list = ["first", "second", "third"];
event.list = list;
}
</script>
Google example:
Am I able to do it with plain JS? Any suggestion will be great :).
I found
javascript : Auto complete javascript text field
if use existing library then
typeahead.js
typeahead.js / example
function loadXMLDoc(_target, _type,_func) {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 ) {
if(xmlhttp.status == 200){
data = JSON.parse(xmlhttp.responseText);
_func(data);
}
else if(xmlhttp.status == 400) {
alert('There was an error 400')
}
else {
alert('something else other than 200 was returned')
}
}
}
xmlhttp.open(_type, _target, true);
xmlhttp.send();
}
function ontxtChange(){
var dcc = document.getElementById('autocc');
var dc = document.getElementById('autoc');
dcc.innerHTML = ' ';
var i = 0;
var target = "https://api.github.com/users/mralexgray/repos"
//
if(dc.value.length > 0){
loadXMLDoc(target,'GET',function(data){
data.forEach(function(x){
if(i < 10){
if(x.name.toLowerCase().indexOf(dc.value.trim()) != -1){
dcc.innerHTML += '<p class="accItem">' + x.name.toLowerCase() + '</p>';
i++;
}
}
});
});
}
}
.accItem{
background-color:#333;
color:#fff;
width:200px;
}
#autocc{
width:200px;
}
<body>
<input type="text" id="autoc" onkeypress="ontxtChange()" > example : "am"
<div id="autocc">
</div>
</body>
suggestion--
condition in call ajax (slow with big data)
condition in send/receive data with ajax
hope help you this way...
It is possible, but you will need to write much more code. Your best option to use existing library that handles this for you:
Documentation: https://github.com/devbridge/jQuery-Autocomplete
Demo: http://devbridge.github.io/jQuery-Autocomplete/

Ajax response to xml page to get title elements doesn't work

Can anyone tell me why I can't get the elements from an XML document? It doesn't print anything when I press the et Title button that i have implemented in the body section. Here's my code:
function MyF () {
var xmlhttp;
var txt,x,i=0;
var xx;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.send();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
x = xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
xx = x[i].getElementsByTagName("TITLE");
document.getElementById("test").innerHTML=xx;
}
}
xmlhttp.open("GET","cd_catalog.xml",true);
}
xmlhttp.responseXML.documentElement is the problem of your troubles. Just use xmlhttp.responseXML.getElementsByTagName and you should be fine.

javascript dynamic content not affected when ajax call

I am new to javascript, am using PHP variable for created link dynamically as given below
$addlink = '<button class="blueBtn btnSmall" id="current'.$product_id.'" onClick=addcart('.#$product_id.',"add")><span class="allitem"
<font color="#A2F3AB">Added</font></span></button>';
This my php variable created by dynamically like below.
Added
Added
Added
I want to change the content of all variable“ added” as“ add” by just one click,Am using ajax function for changing that text as given below..
function clearcart(msg) {
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('cartreturn').innerHTML = xmlhttp.responseText;
document.getElementsByClassName('allitem').innerHTML = "Add";
}
}
xmlhttp.open("GET", "/addcart.php?msg=" + msg, true);
xmlhttp.send();
}
But first link text only affected.. other is not affected how I can solve this problem
document.getElementsByClassName returns a NodeList. You have to iterate over all the elements:
var allItems = getElementsByClassName('allitem');
for (var i = 0; i < allItems.length; i++) {
allItems[i].innerHTML = 'Add';
}
See this question.
You can't do document.getElementsByClassName('allitem').innerHTML.
You can do document.getElementsByClassName('allitem')[0].innerHTML = "Add"
Do you have several elements with the class "allitem"? If you don't, then maybe you should use an id, instead of a class, and then call document.getElementById('allitem').innerHTML = "Add";

Categories