| Server IP : 46.105.57.169 / Your IP : 216.73.216.67 Web Server : Apache System : Linux webm002.cluster120.gra.hosting.ovh.net 6.18.42-ovh-vps-grsec-zfs+ #1 SMP PREEMPT_DYNAMIC Wed Aug 5 15:59:48 CEST 2026 x86_64 User : verseaumee ( 152031) PHP Version : 8.5.7 Disable Function : _dyuweyrj4,_dyuweyrj4r,dl MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/verseaumee/123click/contacts/ |
Upload File : |
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete Search Plugin</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
<meta charset="utf-8" />
<link href="dist/semantic.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<link href="css/ionicons.min.css" rel="stylesheet" />
<link href="css/hightlight.css" rel="stylesheet" />
</head>
<body class="document">
<div class="ui container">
<div class="section">
<div class="row">
<div class="four wide tablet sixteen wide computer column">
<div class="ui basic segment">
<header class="main-header">
<a href="index.html"><img src="img/logo.png" /></a>
<h1>Autocomplete Search Plugin<span>Contacts and Person or e.t.c. Search Documentation</span></h1>
</header>
<h2 class="ui inverted header">Json Example</h2>
<pre><code class="json">[
{
"gender": "female",
"name": {
"title": "madame",
"first": "lylou",
"last": "thomas"
},
"location": {
"street": "5933 rue d'abbeville",
"city": "sottens",
"state": "genève",
"postcode": 4045
},
"email": "lylou.thomas@example.com",
"login": {
"username": "orangemouse111",
"password": "asdfjkl",
"salt": "PmkaTArn",
"md5": "e923e268a9a0ea6ccf402905d7a83f75",
"sha1": "a91d0f4c27d2748c93117a2fa583c182f0eca7ac",
"sha256": "8ce7fb816772369621cc16b2f623a8fd0cadbe4c31b142233ea7f27f6979c5e9"
},
"dob": "1959-06-15 22:30:39",
"registered": "2002-12-27 17:50:02",
"phone": "(772)-966-5431",
"cell": "(505)-943-4344",
"id": {
"name": "AVS",
"value": "756.RDUG.VIGT.94"
},
"picture": {
"large": "https://randomuser.me/api/portraits/women/17.jpg",
"medium": "https://randomuser.me/api/portraits/med/women/17.jpg",
"thumbnail": "https://randomuser.me/api/portraits/thumb/women/17.jpg"
},
"nat": "CH"
}
]</code></pre>
<h1 class="ui inverted sub header">Bloodhound and Searchable Variables Json Parse</h1>
<span>You can use 'var tags = ['name', 'user_name', 'email', 'state']' in html with script before main.js script</span>
<pre><code class="js"> var tags = ['name', 'user_name', 'email', 'state'];//parsing variables for search input
var contactList = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('tags'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
minLength: 1,//minimum character length for search
prefetch: {
url: 'json_file_url',
transform: function (response) {
return $.map(response, function (tag) {
return {
name: tag.name.first + " " + tag.name.last,//parse name from json file
picture: tag.picture.thumbnail,//parse picture form json file
l_picture: tag.picture.large,//parse large picture from json file
email: tag.email,//parse email from json file
phone: tag.phone,//parse phone number from json file
user_name: tag.login.username,//parse user name from json file
state: tag.location.state + ", " + tag.nat//parse state and country code from json file
}
});
},
cache: false,
ttl: 3600000,
},
});</code></pre>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="dist/semantic.min.js"></script>
<script src="http://cdn.jsdelivr.net/highlight.js/9.9.0/highlight.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script>
<script>
$(document).ready(function () {
$('pre code').each(function (i, block) {
hljs.highlightBlock(block);
});
});
</script>
</body>
</html>