1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
| <?php
$names = [
"HABER", "GROUX", "JUMEAU", "COGNEAU", "COGNEAU", "LE", "BEAU", "GIROUARD",
"POLLUCHE", "LEBEAU", "ROULLIER", "MARAIS", "SINSONNES", "MARTIN", "ROSSE",
"SÉGRÉTAIN", "HUET", "SINSONNET", "MARTIN", "GAGER", "LAMBERT", "MENEAU", "COUILLIN",
"LAMBERT", "TUFFÉ", "CLEREAU", "CHAUVEAU", "PAUTONNIÉ", "LEBEAU", "COGNEAU",
"SÉGRÉTAIN", "BURON", "ESNAULT", "HABER", "VEDYE", "HUBERSON", "MARTIN", "DE", "TOUCHE",
"DUCOEURJOLLY", "CRÉPEAU", "PERSON", "MARAIS", "JAMET", "JAMET", "HUBERSON", "BULLOU", "POUCE",
"BULLOU", "PRÉVILLE", "PRÉVILLE", "PRÉVILLE", "PRÉVILLE", "BULLOU", "PAUCÉ", "PRÉVILLE",
"DALPOT", "RENONCET", "PRÉVILLE", "DALPOT", "RENONCET", "MENOU", "MENOU", "MERCIER",
"GESLAIN", "JACQUAI", "GESLAIN", "JOUI", "PIPEREAU", "HUET", "HABER", "JACQUET",
"FERAUD", "SOUCHAY", "MERCIER", "MENOU", "JOUIN", "PIPEREAU", "HOUDÉE", "ISAMBERT","RICHER"
]
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="input" name="" value="">
<input type="hidden" id="list" name="" value="<?php foreach($names as $name){echo $name.' ';} ?>">
<div class="" id="result"></div>
</body>
</html>
<script type="text/javascript">
var list = document.getElementById('list').value.split(' ')
var input = document.getElementById('input')
var result = document.getElementById('result')
input.addEventListener('keyup', function() {
var inputValue = input.value
result.innerHTML = null
for(var j=0; j<list.length; j++) {
if(list[j].toLowerCase().indexOf(inputValue.toLowerCase()) != -1) {
if(result) {
resultValue = result.innerText.split('\n')
if(!resultValue.includes(list[j])) {
var name = document.createElement('button')
name.setAttribute('class', 'choice-name')
name.setAttribute('id', list[j])
name.innerText += list[j]
result.appendChild(name)
}
}
}
}
if(inputValue == '') {
result.innerHTML = null
}
var choiceNames = document.getElementsByClassName('choice-name')
for(var k=0; k<choiceNames.length; k++) {
choiceName = document.getElementById(choiceNames[k].getAttribute('id'))
choiceName.addEventListener('click', function() {
console.log("id => "+choiceName.getAttribute('id'))
input.value = choiceName.innerText
result.innerHTML = null
})
}
})
</script>
<style media="screen">
#result {
position: absolute;
display: flex;
flex-direction: column;
background-color: rgba(100,120,100,1);
}
.choice-name {
border: 1px solid red;
border: none;
background-color: rgba(0,0,0,0);
cursor: pointer;
color: white;
}.choice-name:hover {
background-color: rgba(0,0,0,0.5);
}
</style> |
Partager