jsoneditor
Version:
A web-based tool to view, edit, format, and validate JSON
118 lines (103 loc) • 4.33 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSONEditor | Auto Complete with Multiple Searchable Fields</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css" />
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
width: 600px;
font: 11pt sans-serif;
}
#jsoneditor {
width: 100%;
height: 500px;
}
/* custom bold styling for non-default JSON schema values */
.jsoneditor-is-not-default {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Auto Complete with Multiple Searchable Fields</h1>
<p>
This example demonstrates advanced autocomplete functionality with custom
filtering that searches across multiple fields within each option.
Countries with multiple searchable fields - you can search by country
name, capital city, or country code. Try typing "United States",
"Washington", "US", "Germany", "Berlin", "DE", "Japan", "Tokyo", or "JP".
</p>
<div id="jsoneditor"></div>
<script>
// Advanced autocomplete with multiple searchable fields
const container = document.getElementById("jsoneditor");
// Country data with multiple searchable fields
const countries = [
{ name: "United States", capital: "Washington", code: "US" },
{ name: "United Kingdom", capital: "London", code: "GB" },
{ name: "Germany", capital: "Berlin", code: "DE" },
{ name: "France", capital: "Paris", code: "FR" },
{ name: "Japan", capital: "Tokyo", code: "JP" },
{ name: "Australia", capital: "Canberra", code: "AU" },
{ name: "Canada", capital: "Ottawa", code: "CA" },
{ name: "Brazil", capital: "Brasília", code: "BR" },
{ name: "India", capital: "New Delhi", code: "IN" },
{ name: "China", capital: "Beijing", code: "CN" },
{ name: "Italy", capital: "Rome", code: "IT" },
{ name: "Spain", capital: "Madrid", code: "ES" },
{ name: "Russia", capital: "Moscow", code: "RU" },
{ name: "South Korea", capital: "Seoul", code: "KR" },
{ name: "Mexico", capital: "Mexico City", code: "MX" },
];
const normalizeCase = (text = "", config) => {
return config.caseSensitive ? text : text.toLowerCase();
};
const options = {
autocomplete: {
getOptions: function () {
// Convert country data to text/value format for autocomplete
return countries.map((country) => ({
text: country.name,
value: country.code,
// Store additional searchable fields for custom filtering
_searchableFields: [country.name, country.capital, country.code],
}));
},
filter: function (token, match, config) {
const normalizedToken = normalizeCase(token, config);
// Custom filter that searches across multiple fields
if (typeof match === "string") {
// Handle simple string matches
const normalizedMatch = normalizeCase(match, config);
return normalizedMatch.indexOf(normalizedToken) > -1;
}
if (match && match._searchableFields) {
// Search across all searchable fields
return match._searchableFields.some((field) => {
const normalizedField = normalizeCase(field, config);
return normalizedField.indexOf(normalizedToken) > -1;
});
}
const textMatch =
match.text &&
normalizeCase(match.text, config).indexOf(normalizedToken) > -1;
const valueMatch =
match.value &&
normalizeCase(match.value, config).indexOf(normalizedToken) > -1;
return textMatch || valueMatch;
},
},
};
const json = {
user_countries: ["US", "DE"],
origin_country: "JP",
shipping_countries: ["US", "CA", "GB"],
description:
"Search by country name, capital, or code - value stored is the country code",
};
const editor = new JSONEditor(container, options, json);
</script>
</body>
</html>