Search jQuery

jQuery Forum

Jquery autocomplete using a remote data source

in Using jQuery • 4 years ago

Hi All,

I'm trying to implement Jquery autocomplete using the remote data source (https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/advanced-options/metadata/icons.json).

I'd like to search in the terms array as shown below and return all the objects containing the search term in the arrays. I tried this code but it's not working.

Do we need to implement the data soruce on the server side or will it work with this URL data source (https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/advanced-options/metadata/icons.json).

Any help to make this code (https://jsfiddle.net/arunkumar413/sbtp2znf/11/) workable will be highly appreciated

"search": {
      "terms": [
        "accessibility",
        "handicap",
        "person",
        "wheelchair",
        "wheelchair-alt"
      ]
    },

Replies(4)

jakecigar

Re: Jquery autocomplete using a remote data source

4 years ago

It makes little sense to use a static file as your remote data source. You need a server program to return records that match the search criteria.

AND, GitHub prevents you from using that file directly from a browser.

Refused to execute https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/advanced-options/metadata/icons.json?callback=jQuery33106745798411064948_1543765993056&term=as&_=1543765993057 as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type.

JΛ̊KE

arunkumar..

Re: Jquery autocomplete using a remote data source

4 years ago

So you mean to say that jquery autocomplete doesn't magically search the json data. We need to write the logic to search the data on the server side.

jakecigar

Re: Jquery autocomplete using a remote data source

4 years ago

The normal remote autocomplete is done via a program that queries a database(loaded with that GitHub file) and returns a JSON response with just the information that is applicable for the search.

So, Yes.

Unless this is not for users, just you, and you don’t care about efficiency. You could just copy that file to your own server. You could do local autocomplete, not remote autocomplete.

JΛ̊KE

jakecigar

Re: Jquery autocomplete using a remote data source

4 years ago

This is a personal version. It would not be a great solution for many users.

I loaded the data source as icons.json to my server.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>FA-autocomplete</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" />
<style>
.ui-menu-item svg{display:inline;height:1em;}
.svg svg{width:50px}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
const J = []
$.getJSON("icons.json").then(function(j) {
$.each(j, (k, o) => {
if (o.svg && o.svg.brands){
J.push({
label: k,
value: k,
svg:o.svg.brands.raw
})
$.each(o.search.terms, function(i, t) {
J.push({
label: t,
value: k,
svg:o.svg.brands.raw
})
})
}
})
})
$(function() {
$(".select_icons").autocomplete({
source: J,
minLength: 2,
select: function(event, ui) {
$(this).next().html(ui.item.svg)
},
}).data( "uiAutocomplete" )._renderItem = function( ul, item ) {
console.log(item)
return $( `<li><span>${item.svg} – ${item.label} – ${item.value}</span></li>` ).appendTo( ul );
}
})
</script>
</head>
<body>
<input class='select_icons'>
<div class="svg"></div>
</body>
</html>

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

Jquery autocomplete using a remote data source

Replies(4)

Re: Jquery autocomplete using a remote data source

Re: Jquery autocomplete using a remote data source

Re: Jquery autocomplete using a remote data source

Re: Jquery autocomplete using a remote data source

Statistics

Tags

Actions