Issue with making autocomplete script with xml file
I am trying to make a site search for my site, so that user can search some page with typing some words and they are redirected to the corresponding url of myDomain. I am trying to make an autocomplete for that where I am using help of an xml file for fast speed instead of mysql database. I have put all the titles of my webpages and the corresponding urls in that xml file. Following are my piece of codes.
My HTML Code:
<html>
<head>
<title>..</title>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
var myArr = ;
$.ajax({
type: "GET",
url: "categories.xml", // change to full path of file on server
dataType: "xml",
success: parseXml,
complete: setupAC,
failure: function(data) {
alert("XML File could not be found");
}
});
function parseXml(xml)
{
//find every query value
$(xml).find("category").each(function()
{
myArr.push($(this).attr("label"), $(this).attr("url"));
});
}
function setupAC() {
$("input#searchBox").autocomplete({
source: myArr,
minLength: 2,
select: function(event, ui) {
$("input#searchBox").val(ui.item.value);
window.location = ui.item.value
}
});
}
});
</script>
<!-- Code for Search Box -->
<div id="header-search">
<span class="font-select">
<b>Search Page by Typing few charaters:</b>
<form name="search_form" id="searchForm" method="GET" action="#">
<input type="text" id="searchBox" name="searchString" placeholder="Type category to search.."/>
</form>
</span>
</div>
....
</body>
</html>
And following is my content of XML File "categories.xml" :
<?xml version="1.0" encoding="UTF-8"?>
<categories>
<category label="AC and Refrigeration" url="url_1.php" />
<category label="Advertising Agencies" url="url_2.php" />
<category label="Aluminum and Fabricator" url="url_3.php" />
<category label="Architects" url="url_4.php" />
<category label="Arm and Ammunition" url="url_5.php" />
<category label="Acupressure and Acupuncture Clinic" url="url_6.php" />
<category label="Astrologers" url="url_7.php" />
<category label="ATM Booths" url="url_8.php" />
<category label="Auto Agency" url="url_9.php" />
</categories>
Now, by using above pieces of codes and xml file, my autocomplete functionality is working very fine i.e. if I type the few characters of category labels (mentioned in xml file), it is showing me the autocomplete options to select in search box.
But the problem is when I finally select any one option, it redirects me to the url which is same word which is selected in search box i.e.the category label word in xml file , but i want to redirect it to corresponding url to the value of url in xml file.
e.g. if I have selected the first option "AC and Refrigeration", it is presently redirecting me to url "myDomain.com/AC and Refrigeration" but I want it should redirect me to corresponding url value of xml file i.e. "myDomain.com/url_1.php" . So please look into this code and help me to achieve this as I have tried many things but not able to achieve this, I am missing some small thing here near "window.location = ui.item.value" in script or somewhere else.
Thanks in advance - please help me with the changes or addition in my piece of code.
Please help....
jquery xml autocomplete url-redirection
edited Jan 3 at 13:53
Nesku
4231412
asked Jan 3 at 11:41
RupeshRupesh
126
add a comment |
I am trying to make a site search for my site, so that user can search some page with typing some words and they are redirected to the corresponding url of myDomain. I am trying to make an autocomplete for that where I am using help of an xml file for fast speed instead of mysql database. I have put all the titles of my webpages and the corresponding urls in that xml file. Following are my piece of codes.
My HTML Code:
<html>
<head>
<title>..</title>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
var myArr = ;
$.ajax({
type: "GET",
url: "categories.xml", // change to full path of file on server
dataType: "xml",
success: parseXml,
complete: setupAC,
failure: function(data) {
alert("XML File could not be found");
}
});
function parseXml(xml)
{
//find every query value
$(xml).find("category").each(function()
{
myArr.push($(this).attr("label"), $(this).attr("url"));
});
}
function setupAC() {
$("input#searchBox").autocomplete({
source: myArr,
minLength: 2,
select: function(event, ui) {
$("input#searchBox").val(ui.item.value);
window.location = ui.item.value
}
});
}
});
</script>
<!-- Code for Search Box -->
<div id="header-search">
<span class="font-select">
<b>Search Page by Typing few charaters:</b>
<form name="search_form" id="searchForm" method="GET" action="#">
<input type="text" id="searchBox" name="searchString" placeholder="Type category to search.."/>
</form>
</span>
</div>
....
</body>
</html>
And following is my content of XML File "categories.xml" :
<?xml version="1.0" encoding="UTF-8"?>
<categories>
<category label="AC and Refrigeration" url="url_1.php" />
<category label="Advertising Agencies" url="url_2.php" />
<category label="Aluminum and Fabricator" url="url_3.php" />
<category label="Architects" url="url_4.php" />
<category label="Arm and Ammunition" url="url_5.php" />
<category label="Acupressure and Acupuncture Clinic" url="url_6.php" />
<category label="Astrologers" url="url_7.php" />
<category label="ATM Booths" url="url_8.php" />
<category label="Auto Agency" url="url_9.php" />
</categories>
Now, by using above pieces of codes and xml file, my autocomplete functionality is working very fine i.e. if I type the few characters of category labels (mentioned in xml file), it is showing me the autocomplete options to select in search box.
But the problem is when I finally select any one option, it redirects me to the url which is same word which is selected in search box i.e.the category label word in xml file , but i want to redirect it to corresponding url to the value of url in xml file.
e.g. if I have selected the first option "AC and Refrigeration", it is presently redirecting me to url "myDomain.com/AC and Refrigeration" but I want it should redirect me to corresponding url value of xml file i.e. "myDomain.com/url_1.php" . So please look into this code and help me to achieve this as I have tried many things but not able to achieve this, I am missing some small thing here near "window.location = ui.item.value" in script or somewhere else.
Thanks in advance - please help me with the changes or addition in my piece of code.
Please help....
jquery xml autocomplete url-redirection
edited Jan 3 at 13:53
Nesku
4231412
asked Jan 3 at 11:41
RupeshRupesh
126
add a comment |
I am trying to make a site search for my site, so that user can search some page with typing some words and they are redirected to the corresponding url of myDomain. I am trying to make an autocomplete for that where I am using help of an xml file for fast speed instead of mysql database. I have put all the titles of my webpages and the corresponding urls in that xml file. Following are my piece of codes.
My HTML Code:
<html>
<head>
<title>..</title>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
var myArr = ;
$.ajax({
type: "GET",
url: "categories.xml", // change to full path of file on server
dataType: "xml",
success: parseXml,
complete: setupAC,
failure: function(data) {
alert("XML File could not be found");
}
});
function parseXml(xml)
{
//find every query value
$(xml).find("category").each(function()
{
myArr.push($(this).attr("label"), $(this).attr("url"));
});
}
function setupAC() {
$("input#searchBox").autocomplete({
source: myArr,
minLength: 2,
select: function(event, ui) {
$("input#searchBox").val(ui.item.value);
window.location = ui.item.value
}
});
}
});
</script>
<!-- Code for Search Box -->
<div id="header-search">
<span class="font-select">
<b>Search Page by Typing few charaters:</b>
<form name="search_form" id="searchForm" method="GET" action="#">
<input type="text" id="searchBox" name="searchString" placeholder="Type category to search.."/>
</form>
</span>
</div>
....
</body>
</html>
And following is my content of XML File "categories.xml" :
<?xml version="1.0" encoding="UTF-8"?>
<categories>
<category label="AC and Refrigeration" url="url_1.php" />
<category label="Advertising Agencies" url="url_2.php" />
<category label="Aluminum and Fabricator" url="url_3.php" />
<category label="Architects" url="url_4.php" />
<category label="Arm and Ammunition" url="url_5.php" />
<category label="Acupressure and Acupuncture Clinic" url="url_6.php" />
<category label="Astrologers" url="url_7.php" />
<category label="ATM Booths" url="url_8.php" />
<category label="Auto Agency" url="url_9.php" />
</categories>
Now, by using above pieces of codes and xml file, my autocomplete functionality is working very fine i.e. if I type the few characters of category labels (mentioned in xml file), it is showing me the autocomplete options to select in search box.
But the problem is when I finally select any one option, it redirects me to the url which is same word which is selected in search box i.e.the category label word in xml file , but i want to redirect it to corresponding url to the value of url in xml file.
e.g. if I have selected the first option "AC and Refrigeration", it is presently redirecting me to url "myDomain.com/AC and Refrigeration" but I want it should redirect me to corresponding url value of xml file i.e. "myDomain.com/url_1.php" . So please look into this code and help me to achieve this as I have tried many things but not able to achieve this, I am missing some small thing here near "window.location = ui.item.value" in script or somewhere else.
Thanks in advance - please help me with the changes or addition in my piece of code.
Please help....
jquery xml autocomplete url-redirection
edited Jan 3 at 13:53
Nesku
4231412
asked Jan 3 at 11:41
RupeshRupesh
126
I am trying to make a site search for my site, so that user can search some page with typing some words and they are redirected to the corresponding url of myDomain. I am trying to make an autocomplete for that where I am using help of an xml file for fast speed instead of mysql database. I have put all the titles of my webpages and the corresponding urls in that xml file. Following are my piece of codes.
My HTML Code:
<html>
<head>
<title>..</title>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
var myArr = ;
$.ajax({
type: "GET",
url: "categories.xml", // change to full path of file on server
dataType: "xml",
success: parseXml,
complete: setupAC,
failure: function(data) {
alert("XML File could not be found");
}
});
function parseXml(xml)
{
//find every query value
$(xml).find("category").each(function()
{
myArr.push($(this).attr("label"), $(this).attr("url"));
});
}
function setupAC() {
$("input#searchBox").autocomplete({
source: myArr,
minLength: 2,
select: function(event, ui) {
$("input#searchBox").val(ui.item.value);
window.location = ui.item.value
}
});
}
});
</script>
<!-- Code for Search Box -->
<div id="header-search">
<span class="font-select">
<b>Search Page by Typing few charaters:</b>
<form name="search_form" id="searchForm" method="GET" action="#">
<input type="text" id="searchBox" name="searchString" placeholder="Type category to search.."/>
</form>
</span>
</div>
....
</body>
</html>
And following is my content of XML File "categories.xml" :
<?xml version="1.0" encoding="UTF-8"?>
<categories>
<category label="AC and Refrigeration" url="url_1.php" />
<category label="Advertising Agencies" url="url_2.php" />
<category label="Aluminum and Fabricator" url="url_3.php" />
<category label="Architects" url="url_4.php" />
<category label="Arm and Ammunition" url="url_5.php" />
<category label="Acupressure and Acupuncture Clinic" url="url_6.php" />
<category label="Astrologers" url="url_7.php" />
<category label="ATM Booths" url="url_8.php" />
<category label="Auto Agency" url="url_9.php" />
</categories>
Now, by using above pieces of codes and xml file, my autocomplete functionality is working very fine i.e. if I type the few characters of category labels (mentioned in xml file), it is showing me the autocomplete options to select in search box.
But the problem is when I finally select any one option, it redirects me to the url which is same word which is selected in search box i.e.the category label word in xml file , but i want to redirect it to corresponding url to the value of url in xml file.
e.g. if I have selected the first option "AC and Refrigeration", it is presently redirecting me to url "myDomain.com/AC and Refrigeration" but I want it should redirect me to corresponding url value of xml file i.e. "myDomain.com/url_1.php" . So please look into this code and help me to achieve this as I have tried many things but not able to achieve this, I am missing some small thing here near "window.location = ui.item.value" in script or somewhere else.
Thanks in advance - please help me with the changes or addition in my piece of code.
Please help....
jquery xml autocomplete url-redirection
jquery xml autocomplete url-redirection
edited Jan 3 at 13:53
Nesku
4231412
asked Jan 3 at 11:41
RupeshRupesh
126
edited Jan 3 at 13:53
Nesku
4231412
asked Jan 3 at 11:41
RupeshRupesh
126
edited Jan 3 at 13:53
Nesku
4231412
edited Jan 3 at 13:53
Nesku
4231412
edited Jan 3 at 13:53
Nesku
4231412
4231412
asked Jan 3 at 11:41
RupeshRupesh
126
asked Jan 3 at 11:41
RupeshRupesh
126
asked Jan 3 at 11:41
RupeshRupesh
126
126
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
With myArr.push($(this).attr("label"), $(this).attr("url")) you're pushing into myArr both the label and url as elements of your array. (If you were to type url in your input it would return url_1.php ...).
You need to add an object containing both the label and url :
myArr.push({label: $(this).attr("label"), url : $(this).attr("url")});
You could then access the item value with ui.item.label and ui.item.url and your redirect would look like this :
$("input#searchBox").val(ui.item.url);
window.location = ui.item.url
answered Jan 3 at 12:45
NeskuNesku
4231412
Thanks a ton Neksu.... it is working now as I wanted. I got your point where I was mistaken. Thanks for this great help...!
– Rupesh
Jan 3 at 13:00
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54021591%2fissue-with-making-autocomplete-script-with-xml-file%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
With myArr.push($(this).attr("label"), $(this).attr("url")) you're pushing into myArr both the label and url as elements of your array. (If you were to type url in your input it would return url_1.php ...).
You need to add an object containing both the label and url :
myArr.push({label: $(this).attr("label"), url : $(this).attr("url")});
You could then access the item value with ui.item.label and ui.item.url and your redirect would look like this :
$("input#searchBox").val(ui.item.url);
window.location = ui.item.url
answered Jan 3 at 12:45
NeskuNesku
4231412
Thanks a ton Neksu.... it is working now as I wanted. I got your point where I was mistaken. Thanks for this great help...!
– Rupesh
Jan 3 at 13:00
add a comment |
With myArr.push($(this).attr("label"), $(this).attr("url")) you're pushing into myArr both the label and url as elements of your array. (If you were to type url in your input it would return url_1.php ...).
You need to add an object containing both the label and url :
myArr.push({label: $(this).attr("label"), url : $(this).attr("url")});
You could then access the item value with ui.item.label and ui.item.url and your redirect would look like this :
$("input#searchBox").val(ui.item.url);
window.location = ui.item.url
answered Jan 3 at 12:45
NeskuNesku
4231412
Thanks a ton Neksu.... it is working now as I wanted. I got your point where I was mistaken. Thanks for this great help...!
– Rupesh
Jan 3 at 13:00
add a comment |
With myArr.push($(this).attr("label"), $(this).attr("url")) you're pushing into myArr both the label and url as elements of your array. (If you were to type url in your input it would return url_1.php ...).
You need to add an object containing both the label and url :
myArr.push({label: $(this).attr("label"), url : $(this).attr("url")});
You could then access the item value with ui.item.label and ui.item.url and your redirect would look like this :
$("input#searchBox").val(ui.item.url);
window.location = ui.item.url
answered Jan 3 at 12:45
NeskuNesku
4231412
With myArr.push($(this).attr("label"), $(this).attr("url")) you're pushing into myArr both the label and url as elements of your array. (If you were to type url in your input it would return url_1.php ...).
You need to add an object containing both the label and url :
myArr.push({label: $(this).attr("label"), url : $(this).attr("url")});
You could then access the item value with ui.item.label and ui.item.url and your redirect would look like this :
$("input#searchBox").val(ui.item.url);
window.location = ui.item.url
answered Jan 3 at 12:45
NeskuNesku
4231412
answered Jan 3 at 12:45
NeskuNesku
4231412
answered Jan 3 at 12:45
NeskuNesku
4231412
answered Jan 3 at 12:45
NeskuNesku
4231412
4231412
Thanks a ton Neksu.... it is working now as I wanted. I got your point where I was mistaken. Thanks for this great help...!
– Rupesh
Jan 3 at 13:00
add a comment |
Thanks a ton Neksu.... it is working now as I wanted. I got your point where I was mistaken. Thanks for this great help...!
– Rupesh
Jan 3 at 13:00
Thanks a ton Neksu.... it is working now as I wanted. I got your point where I was mistaken. Thanks for this great help...!
– Rupesh
Jan 3 at 13:00
Thanks a ton Neksu.... it is working now as I wanted. I got your point where I was mistaken. Thanks for this great help...!
– Rupesh
Jan 3 at 13:00
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54021591%2fissue-with-making-autocomplete-script-with-xml-file%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
