Bind() met Gebruikersnamen en Change() om te tonen
Ik ben nieuw op dit forum en ik hoop dat ik hier veel kan leren!
Ik zal zo goed mogelijk proberen uit te leggen wat ik wilt.
Ik heb volgende input, voorbeeld:
Code (php)
1
<input type="text" id="#detectTab">
Ook heb ik een lijst met meerdere gebruikersnamen, voorbeeld (1 Gebruikersnaam voor nu om html te tonen):
Code (php)
1
2
3
2
3
<div class="user" user_name="Gebruikersnaam" profile_id="1" embedded="1">
<img title="Administrator" src="template/icons/admin.png">
<a class="Man" href="#Gebruikersnaam">Gebruikersnaam</a>
<img title="Administrator" src="template/icons/admin.png">
<a class="Man" href="#Gebruikersnaam">Gebruikersnaam</a>
En verder jQuery (jQuery is niet compleet en expertimenteel vanwege testen steeds):
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<script>
$('body').on('keydown', '#detectTab', function(e) {
if (e.which == 9) {
e.preventDefault();
var getName = this.value;
//alert(getName);
$(".user").bind('change', function() {
alert(getName);
console.log(getName);
});;
}
});
</script>
$('body').on('keydown', '#detectTab', function(e) {
if (e.which == 9) {
e.preventDefault();
var getName = this.value;
//alert(getName);
$(".user").bind('change', function() {
alert(getName);
console.log(getName);
});;
}
});
</script>
Het is me echter wel gelukt om uit te zoeken, wanneer tab herkend wordt na veel proberen, maar wat mijn echte bedoeling is dat als een gebruiker een naam in de veld typt, als voorbeeld, gebruikersnaam is "PhpGuy" en de persoon typt "Php", vervolgens drukt ie dan op tab, dan is de bedoeling dat javascript de complete naam van de lijst haalt, waar alle gebruikersnaam staan en dat vervolgens toont in hetzelfde veld (voorbeeld: PhpGuy: met ":"). Ik heb al diverse malen geprobeerd vanuit jQuery documentation, maar helaas is mijn ervaring in jQuery maar heel beperkt, dus kom ik er niet uit en hoop ik dat jullie mij hiermee verder op weg kunnen helpen.
Alvast bedankt!
Gewijzigd op 17/06/2014 12:45:22 door Goto Learn
Code (php)
1
<input type="text" id="detectTab">
En dan in jQuery:
Code (php)
1
$('#detectTab').autocomplete();
Kijk hier eens: http://jqueryui.com/autocomplete/
Bedankt voor je reactie en autocomplete() is inderdaad een optie, maar mijn probleem is ook dat ik niet weet hoe ik kan binden met gebruikersnamen die in een lijst staat en completeert in input text, wanneer je klein deel van de naam hebt getypt en erna vervolgens op tab hebt drukt.
Nee geen lijst, dat is meer voor als je gaat zoeken naar gebruikersnamen, maar in dit geval moet het gewoon gecompleteerd worden in de input text veld zelf, wanneer je op Tab drukt. Denk hierbij aan irc chat bijvoorbeeld, daar heb je dus hetzelfde optie.
Edit: Ik heb een kleine chat geschreven in php, ajax, jquery, om het duidelijker te maken.
Gewijzigd op 17/06/2014 13:31:19 door Goto Learn
Code (html)
1
<input type="text" id="msg">
Code (js)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
$(function() {
$('#msg').keydown(function(e) {
if (e.keyCode == 9)
{
$.post('usernames.php', {search: $(this).val()}, function(res) {
$(this).val(res);
});
return false;
}
});
});
$('#msg').keydown(function(e) {
if (e.keyCode == 9)
{
$.post('usernames.php', {search: $(this).val()}, function(res) {
$(this).val(res);
});
return false;
}
});
});
Code (usernames.php) (php)
1
2
3
4
2
3
4
<?php
// Hier je Query met een LIKE '%" . $_POST['search'] . "%'
// en dan het eerste resultaat echoën
?>
// Hier je Query met een LIKE '%" . $_POST['search'] . "%'
// en dan het eerste resultaat echoën
?>
Gewijzigd op 17/06/2014 13:54:56 door Nick Dijkstra
Ik dacht overigens dat het alleen met javascript kon, maar blijkbaar komt php dus ook van pas hierbij.
Gewijzigd op 17/06/2014 15:07:07 door Goto Learn
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
$stmt = $mysqli->prepare("SELECT user_name FROM users WHERE user_name LIKE CONCAT('%', ?, '%') LIMIT 1");
$stmt->bind_param('s', $_POST['search']);
$stmt->execute();
$stmt->bind_result($username);
$stmt->fetch();
echo $username;
?>
$stmt = $mysqli->prepare("SELECT user_name FROM users WHERE user_name LIKE CONCAT('%', ?, '%') LIMIT 1");
$stmt->bind_param('s', $_POST['search']);
$stmt->execute();
$stmt->bind_result($username);
$stmt->fetch();
echo $username;
?>
Gewijzigd op 17/06/2014 15:46:03 door Nick Dijkstra
Php zit nu goed in elkaar en hij echo't de juiste naam, maar om een of ander reden word het niet gecompleteerd in input text met javascript.
Php code voor nu:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$db = new mysqli("localhost","user","pass","databasename");
$sql = "SELECT user_name FROM users WHERE user_name LIKE CONCAT('%', ?, '%') LIMIT 1";
$stmt = $db->prepare($sql);
if($stmt){
$stmt->bind_param("s", $_POST['search']);
$stmt->execute();
$stmt->bind_result($username);
while ($stmt->fetch()) {
echo $username;
}
}
$sql = "SELECT user_name FROM users WHERE user_name LIKE CONCAT('%', ?, '%') LIMIT 1";
$stmt = $db->prepare($sql);
if($stmt){
$stmt->bind_param("s", $_POST['search']);
$stmt->execute();
$stmt->bind_result($username);
while ($stmt->fetch()) {
echo $username;
}
}
Misschien dat andere mensen op dit forum er wat in de toekomst aan hebben.
Alleen javascript is nog niet helemaal goed.
Edit: het is inmiddels opgelost na aantal geprobeerd te hebben. Resultaat:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
$(function() {
$('#msg').keydown(function(e) {
if (e.keyCode == 9)
{
$.post('TabUsernames.php', {search: $(this).val()}, function(res) {
$('input[name=name]').val(res);
//alert(res);
});
return false;
}
});
});
</script>
$(function() {
$('#msg').keydown(function(e) {
if (e.keyCode == 9)
{
$.post('TabUsernames.php', {search: $(this).val()}, function(res) {
$('input[name=name]').val(res);
//alert(res);
});
return false;
}
});
});
</script>
Code (php)
1
<input type="text" id="msg" value="" name="name">
Dank je Nick Dijkstra!!
Kleine vraagje: Waarom gebruik je 'return false' in javascript?
Gewijzigd op 17/06/2014 16:04:10 door Goto Learn
return false gebruik ik om de eigenlijke functie van de tab-toets uit te schakelen.