jquery autocomplete json won't display - css issue?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I am trying to get a part number and description by autocompleting the partNumb id.
I get a PHP response for my autocomplete request:
[{
"partNumb":"500406-12610532",
"partDesc":"Bray Series 50 ",
"vendName":"U",
"manuName":"Bray"
}] I am using the simplest of AC requests:
$('#partNumber_1').autocomplete(
{
minLength:4,
source: "db_AC.php?name=PN",
dataType: "json"
});The browser show two thin LIs, but nothing in them...
How can I have a label for partNumb and the part description in the description textfield?
Thanks
jquery autocomplete display
asked Nov 23 '18 at 19:20
marmar
11
add a comment |
0
I am trying to get a part number and description by autocompleting the partNumb id.
I get a PHP response for my autocomplete request:
[{
"partNumb":"500406-12610532",
"partDesc":"Bray Series 50 ",
"vendName":"U",
"manuName":"Bray"
}] I am using the simplest of AC requests:
$('#partNumber_1').autocomplete(
{
minLength:4,
source: "db_AC.php?name=PN",
dataType: "json"
});The browser show two thin LIs, but nothing in them...
How can I have a label for partNumb and the part description in the description textfield?
Thanks
jquery autocomplete display
asked Nov 23 '18 at 19:20
marmar
11
add a comment |
0
0
0
I am trying to get a part number and description by autocompleting the partNumb id.
I get a PHP response for my autocomplete request:
[{
"partNumb":"500406-12610532",
"partDesc":"Bray Series 50 ",
"vendName":"U",
"manuName":"Bray"
}] I am using the simplest of AC requests:
$('#partNumber_1').autocomplete(
{
minLength:4,
source: "db_AC.php?name=PN",
dataType: "json"
});The browser show two thin LIs, but nothing in them...
How can I have a label for partNumb and the part description in the description textfield?
Thanks
jquery autocomplete display
asked Nov 23 '18 at 19:20
marmar
11
I am trying to get a part number and description by autocompleting the partNumb id.
I get a PHP response for my autocomplete request:
[{
"partNumb":"500406-12610532",
"partDesc":"Bray Series 50 ",
"vendName":"U",
"manuName":"Bray"
}] I am using the simplest of AC requests:
$('#partNumber_1').autocomplete(
{
minLength:4,
source: "db_AC.php?name=PN",
dataType: "json"
});The browser show two thin LIs, but nothing in them...
How can I have a label for partNumb and the part description in the description textfield?
Thanks
[{
"partNumb":"500406-12610532",
"partDesc":"Bray Series 50 ",
"vendName":"U",
"manuName":"Bray"
}] [{
"partNumb":"500406-12610532",
"partDesc":"Bray Series 50 ",
"vendName":"U",
"manuName":"Bray"
}] $('#partNumber_1').autocomplete(
{
minLength:4,
source: "db_AC.php?name=PN",
dataType: "json"
});$('#partNumber_1').autocomplete(
{
minLength:4,
source: "db_AC.php?name=PN",
dataType: "json"
});jquery autocomplete display
jquery autocomplete display
asked Nov 23 '18 at 19:20
marmar
11
asked Nov 23 '18 at 19:20
marmar
11
asked Nov 23 '18 at 19:20
marmar
11
asked Nov 23 '18 at 19:20
marmar
11
asked Nov 23 '18 at 19:20
marmar
11
11
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
As i can see in the docs, your data need to respect the format supported for source: [{label: "Choice1", value: "value1"}, ...]
If you can't edit this response, you need to filter the data. I recommend you do an ajax to retrieve your data and put in a variable, then filter as below
$(function() {
//stored variable from ajax call
var dataFromPhp = [{
"partNumb": "500406-12610532",
"partDesc": "Bray Series 50 ",
"vendName": "U",
"manuName": "Bray"
}, {
"partNumb": "500406-12610532",
"partDesc": "Test Series 50 ",
"vendName": "A",
"manuName": "Allin"
}];
var filter = $.map(dataFromPhp, function(data, i) {
return [{
label: data.partDesc,
value: data.partNumb
}];
});
$('#partNumber_1').autocomplete({
minLength: 2,
source: filter,
//source: "db_AC.php?name=PN", USE THIS IN AJAX CALL
//dataType: "json"
});
});<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
<label for="tags">Autocomplete: </label>
<input id="partNumber_1">
</div>answered Nov 23 '18 at 20:22
Giovan CruzGiovan Cruz
134114
This is convoluted - I have json returned from autocomplete response, can you help me format it to display correctly?
– mar
Nov 23 '18 at 23:22
As I did above will solve, using map function to format the array of your response. All you need to do is replace the vardataFromPhpwith oneajax functionthat return the data of your php code insuccess. Let me know if you can't do that.
– Giovan Cruz
Nov 26 '18 at 10:57
@mar Mark this question as solved
– Giovan Cruz
Feb 5 at 12:46
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
});
}
});
draft saved
draft discarded
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%2f53451979%2fjquery-autocomplete-json-wont-display-css-issue%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
0
As i can see in the docs, your data need to respect the format supported for source: [{label: "Choice1", value: "value1"}, ...]
If you can't edit this response, you need to filter the data. I recommend you do an ajax to retrieve your data and put in a variable, then filter as below
$(function() {
//stored variable from ajax call
var dataFromPhp = [{
"partNumb": "500406-12610532",
"partDesc": "Bray Series 50 ",
"vendName": "U",
"manuName": "Bray"
}, {
"partNumb": "500406-12610532",
"partDesc": "Test Series 50 ",
"vendName": "A",
"manuName": "Allin"
}];
var filter = $.map(dataFromPhp, function(data, i) {
return [{
label: data.partDesc,
value: data.partNumb
}];
});
$('#partNumber_1').autocomplete({
minLength: 2,
source: filter,
//source: "db_AC.php?name=PN", USE THIS IN AJAX CALL
//dataType: "json"
});
});<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
<label for="tags">Autocomplete: </label>
<input id="partNumber_1">
</div>answered Nov 23 '18 at 20:22
Giovan CruzGiovan Cruz
134114
This is convoluted - I have json returned from autocomplete response, can you help me format it to display correctly?
– mar
Nov 23 '18 at 23:22
As I did above will solve, using map function to format the array of your response. All you need to do is replace the vardataFromPhpwith oneajax functionthat return the data of your php code insuccess. Let me know if you can't do that.
– Giovan Cruz
Nov 26 '18 at 10:57
@mar Mark this question as solved
– Giovan Cruz
Feb 5 at 12:46
add a comment |
0
As i can see in the docs, your data need to respect the format supported for source: [{label: "Choice1", value: "value1"}, ...]
If you can't edit this response, you need to filter the data. I recommend you do an ajax to retrieve your data and put in a variable, then filter as below
$(function() {
//stored variable from ajax call
var dataFromPhp = [{
"partNumb": "500406-12610532",
"partDesc": "Bray Series 50 ",
"vendName": "U",
"manuName": "Bray"
}, {
"partNumb": "500406-12610532",
"partDesc": "Test Series 50 ",
"vendName": "A",
"manuName": "Allin"
}];
var filter = $.map(dataFromPhp, function(data, i) {
return [{
label: data.partDesc,
value: data.partNumb
}];
});
$('#partNumber_1').autocomplete({
minLength: 2,
source: filter,
//source: "db_AC.php?name=PN", USE THIS IN AJAX CALL
//dataType: "json"
});
});<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
<label for="tags">Autocomplete: </label>
<input id="partNumber_1">
</div>answered Nov 23 '18 at 20:22
Giovan CruzGiovan Cruz
134114
This is convoluted - I have json returned from autocomplete response, can you help me format it to display correctly?
– mar
Nov 23 '18 at 23:22
As I did above will solve, using map function to format the array of your response. All you need to do is replace the vardataFromPhpwith oneajax functionthat return the data of your php code insuccess. Let me know if you can't do that.
– Giovan Cruz
Nov 26 '18 at 10:57
@mar Mark this question as solved
– Giovan Cruz
Feb 5 at 12:46
add a comment |
0
0
0
As i can see in the docs, your data need to respect the format supported for source: [{label: "Choice1", value: "value1"}, ...]
If you can't edit this response, you need to filter the data. I recommend you do an ajax to retrieve your data and put in a variable, then filter as below
$(function() {
//stored variable from ajax call
var dataFromPhp = [{
"partNumb": "500406-12610532",
"partDesc": "Bray Series 50 ",
"vendName": "U",
"manuName": "Bray"
}, {
"partNumb": "500406-12610532",
"partDesc": "Test Series 50 ",
"vendName": "A",
"manuName": "Allin"
}];
var filter = $.map(dataFromPhp, function(data, i) {
return [{
label: data.partDesc,
value: data.partNumb
}];
});
$('#partNumber_1').autocomplete({
minLength: 2,
source: filter,
//source: "db_AC.php?name=PN", USE THIS IN AJAX CALL
//dataType: "json"
});
});<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
<label for="tags">Autocomplete: </label>
<input id="partNumber_1">
</div>answered Nov 23 '18 at 20:22
Giovan CruzGiovan Cruz
134114
As i can see in the docs, your data need to respect the format supported for source: [{label: "Choice1", value: "value1"}, ...]
If you can't edit this response, you need to filter the data. I recommend you do an ajax to retrieve your data and put in a variable, then filter as below
$(function() {
//stored variable from ajax call
var dataFromPhp = [{
"partNumb": "500406-12610532",
"partDesc": "Bray Series 50 ",
"vendName": "U",
"manuName": "Bray"
}, {
"partNumb": "500406-12610532",
"partDesc": "Test Series 50 ",
"vendName": "A",
"manuName": "Allin"
}];
var filter = $.map(dataFromPhp, function(data, i) {
return [{
label: data.partDesc,
value: data.partNumb
}];
});
$('#partNumber_1').autocomplete({
minLength: 2,
source: filter,
//source: "db_AC.php?name=PN", USE THIS IN AJAX CALL
//dataType: "json"
});
});<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
<label for="tags">Autocomplete: </label>
<input id="partNumber_1">
</div>$(function() {
//stored variable from ajax call
var dataFromPhp = [{
"partNumb": "500406-12610532",
"partDesc": "Bray Series 50 ",
"vendName": "U",
"manuName": "Bray"
}, {
"partNumb": "500406-12610532",
"partDesc": "Test Series 50 ",
"vendName": "A",
"manuName": "Allin"
}];
var filter = $.map(dataFromPhp, function(data, i) {
return [{
label: data.partDesc,
value: data.partNumb
}];
});
$('#partNumber_1').autocomplete({
minLength: 2,
source: filter,
//source: "db_AC.php?name=PN", USE THIS IN AJAX CALL
//dataType: "json"
});
});<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
<label for="tags">Autocomplete: </label>
<input id="partNumber_1">
</div>$(function() {
//stored variable from ajax call
var dataFromPhp = [{
"partNumb": "500406-12610532",
"partDesc": "Bray Series 50 ",
"vendName": "U",
"manuName": "Bray"
}, {
"partNumb": "500406-12610532",
"partDesc": "Test Series 50 ",
"vendName": "A",
"manuName": "Allin"
}];
var filter = $.map(dataFromPhp, function(data, i) {
return [{
label: data.partDesc,
value: data.partNumb
}];
});
$('#partNumber_1').autocomplete({
minLength: 2,
source: filter,
//source: "db_AC.php?name=PN", USE THIS IN AJAX CALL
//dataType: "json"
});
});<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
<label for="tags">Autocomplete: </label>
<input id="partNumber_1">
</div>answered Nov 23 '18 at 20:22
Giovan CruzGiovan Cruz
134114
answered Nov 23 '18 at 20:22
Giovan CruzGiovan Cruz
134114
answered Nov 23 '18 at 20:22
Giovan CruzGiovan Cruz
134114
answered Nov 23 '18 at 20:22
Giovan CruzGiovan Cruz
134114
134114
This is convoluted - I have json returned from autocomplete response, can you help me format it to display correctly?
– mar
Nov 23 '18 at 23:22
As I did above will solve, using map function to format the array of your response. All you need to do is replace the vardataFromPhpwith oneajax functionthat return the data of your php code insuccess. Let me know if you can't do that.
– Giovan Cruz
Nov 26 '18 at 10:57
@mar Mark this question as solved
– Giovan Cruz
Feb 5 at 12:46
add a comment |
This is convoluted - I have json returned from autocomplete response, can you help me format it to display correctly?
– mar
Nov 23 '18 at 23:22
As I did above will solve, using map function to format the array of your response. All you need to do is replace the vardataFromPhpwith oneajax functionthat return the data of your php code insuccess. Let me know if you can't do that.
– Giovan Cruz
Nov 26 '18 at 10:57
@mar Mark this question as solved
– Giovan Cruz
Feb 5 at 12:46
This is convoluted - I have json returned from autocomplete response, can you help me format it to display correctly?
– mar
Nov 23 '18 at 23:22
This is convoluted - I have json returned from autocomplete response, can you help me format it to display correctly?
– mar
Nov 23 '18 at 23:22
As I did above will solve, using map function to format the array of your response. All you need to do is replace the var
dataFromPhp with one ajax function that return the data of your php code in success. Let me know if you can't do that.– Giovan Cruz
Nov 26 '18 at 10:57
As I did above will solve, using map function to format the array of your response. All you need to do is replace the var
dataFromPhp with one ajax function that return the data of your php code in success. Let me know if you can't do that.– Giovan Cruz
Nov 26 '18 at 10:57
@mar Mark this question as solved
– Giovan Cruz
Feb 5 at 12:46
@mar Mark this question as solved
– Giovan Cruz
Feb 5 at 12:46
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53451979%2fjquery-autocomplete-json-wont-display-css-issue%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
