jquery autocomplete json won't display

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;
}

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

asked Nov 23 '18 at 19:20

mar

add a comment |

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

asked Nov 23 '18 at 19:20

mar

add a comment |

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

asked Nov 23 '18 at 19:20

mar

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

asked Nov 23 '18 at 19:20

mar

asked Nov 23 '18 at 19:20

mar

asked Nov 23 '18 at 19:20

mar

asked Nov 23 '18 at 19:20

mar

asked Nov 23 '18 at 19:20

mar

add a comment |

1 Answer
1

active

oldest

votes

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 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 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

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');
});

Post as a guest

Name

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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 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 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

add a comment |

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 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 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

add a comment |

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 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 Cruz

134114

answered Nov 23 '18 at 20:22

Giovan Cruz

134114

answered Nov 23 '18 at 20:22

Giovan Cruz

134114

answered Nov 23 '18 at 20:22

Giovan 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 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

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 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

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

@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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk