<div class="form-group">
<input type="text" name="name" autocomplete="off">
<div class="result"></div>
</div>
<div class="form-group">
<input type="text" name="name" autocomplete="off">
<div class="result"></div>
</div>
$(".result").closest("ul").html(data);
$(document).ready(function() {
$("input").keyup(function() {
var input = $(this).val();
$(".loader").show();
if (input.length > 3) {
$.ajax({
type: 'POST',
url: 'insert-ajax.php',
data: {
name: input
},
success: function(data) {
if (!data.error) {
// $(".result").html(data);
$(".result").closest("ul").html(data);
$(".loader").hide();
}
}
});
}
if (input.length < 1) {
$(".loader").hide();
$(".result").html("");
}
});
$(".result").on("click", "li", function() {
console.log($(this).text());
$(this).closest(".result").siblings("input").val($(this).text());
});
});
$('input',$(this).closest(".form-group")).val($(this).text());
$("ul").closest(".result").html(data);
$(".result").html(data);
$(".result", $(this).closest("form-group")) .html(data);
$(".result", $(this).closest(".form-group")) .html(data);
//$(document).ready(function() {
// I prefer $(function
$(function() {
$("input").keyup(function() {
var input = $(this).val();
$(".loader").show();
if (input.length > 3) {
$.ajax({
type: 'POST',
url: 'insert-ajax.php',
data: {
name: input
},
success: function(data) {
// PROBLEM: THE if SAYS YOU ARE EXPECTING AN OBJECT BACK - SOMETHING LIKE
// {
// error: 'Something here'
// }
// BUT ...
if (!data.error) {
// $(".result").html(data);
// OVER HERE YOU ARE USING IT AS AN HTML RETURN
// ALSO .result IS GOING TO RETURN THE FIRST .result IT FINDS
// ON THE PAGE - NOT RELATIVE TO THE INPUT
$(".result").closest("ul").html(data);
$(".loader").hide();
}
}
});
}
if (input.length < 1) {
$(".loader").hide();
$(".result").html("");
}
});
$(".result").on("click", "li", function() {
console.log($(this).text());
$(this).closest(".result").siblings("input").val($(this).text());
});
});
<script>
$(function() {
$("input").keyup(function() {
// GET A REFERENCE TO THE <input> THAT TRIGGERED THE EVENT
var jqo = $(this);
// GET THE VALUE
var input = jqo.val();
// FIND THE result <div> FOR THIS <input>
var result = jqo.closest('div').find('.result');
if (input.length > 3) {
// GET DATA FROM SERVER
$.ajax({
type: 'POST',
url: 't2185.php',
data: {
name: input
}
})
// .success IS ON ITS WAY OUT
// I PREFER promise INTERFACE
.done(function(data) {
// data IS PLAIN HTML SO ADD IT TO OUR
// result WINDOW
result.html(data);
})
}
// THE REST IS THE SAME
if (input.length < 1) {
result.html("");
}
});
$(".result").on("click", "li", function() {
console.log($(this).text());
$(this).closest(".result").siblings("input").val($(this).text());
});
});
</script>
$(this).closest(".result").hide()
So, "name" would have to be "name[]"Firstly, name <>Â name[] - the former will only come through in PHP $_POST as the last value submitted.
<form action="reflect.php" method="post">
<input name="name" value="fred" />
<input name="name" value="frank" />
<input name="name" value="frida" />
<input type="submit" />
</form>
Result$_POST
Array
(
[name] => frida
)
However if we do the follwoingecho file_get_contents('php://input');
We get thisname=fred&name=frank&name=frida
PHP takes the last value for the $_POST['name']<form action="reflect.php" method="post">
<input name="name[]" value="fred" />
<input name="name[]" value="frank" />
<input name="name[]" value="frida" />
<input type="submit" />
</form>
Gives us$_POST
Array
(
[name] => Array
(
[0] => fred
[1] => frank
[2] => frida
)
)
$(this).closest(".result").hide()
I would rather do this<script>
$(function() {
$("input").keyup(function() {
// GET A REFERENCE TO THE <input> THAT TRIGGERED THE EVENT
var jqo = $(this);
// GET THE VALUE
var input = jqo.val();
// FIND THE result <div> FOR THIS <input>
var result = jqo.closest('div').find('.result');
if (input.length > 3) {
// GET DATA FROM SERVER
$.ajax({
type: 'POST',
url: 't2185.php',
data: {
name: input
}
})
// .success IS ON ITS WAY OUT
// I PREFER promise INTERFACE
.done(function(data) {
// data IS PLAIN HTML SO ADD IT TO OUR
// result WINDOW
result.html(data);
result.data('input', jqo);
})
}
// THE REST IS THE SAME
if (input.length < 1) {
result.html("");
}
});
$('.result').on('click','li', function() {
var res = $(this).closest('.result');
res.data('input').val(this.textContent);
res.html('');
});
});
</script>
Breaking it downresult.data('input', jqo);
This is taking advantage of jQuery objects. I assign the input control for the .result container to a data attribute on the element. The jQuery data() method allows you to assign a scalar value (string, number) or an object. The jqo is the jQuery object we created at the beginning so we could access the input val. $('.result').on('click','li', function() {
var res = $(this).closest('.result');
res.data('input').val(this.textContent);
res.html('');
});
The input is available on the result container - so we save ourselves an extra find. $('.result').on('click', function(evt) {
$(this).data('input').val(evt.target.textContent);
this.textContent = '';
});
Here we bind to the .result container - not the li. We know the children will be li's so we can use this code.Sorry, maybe I didn't explain what I was trying to say properly but I was agreeing with you.No, I did understand - I just provided that post for background because there is often a misconception that when using a non array duplicate data is lost. It is only lost when accessing the $_POST array but you can still get the data using php://input - and then parse it yourself.
What does the loader look like - can you post it.
// FIND THE CLOSEST LOADER FOR THIS INPUT
var loader = jqo.closest('div').find('.loader');
$(loader).show();
<div class="form-group">
<input type="text" name="name" autocomplete="off">
<div style="display:none" class="loader">
<img src="../build/css/ajax-loader.gif" />
</div>
<div class="result"></div>
</div>
.loader {
position: absolute;
top: 0%;
left: 18.5%;
}
.loader {
position: absolute;
top: 0%;
left: 18.5%;
}
.form-group {
position: relative;
}
<style type="text/css">
.form-group {
position: relative;
width: 25%;
}
input {
width: 100%;
height: 30px;
}
.loader {
display: none;
position: absolute;
right: 0;
top: 0;
height: 100%;
background: rgba(0,0,0,0.15) url(images/loading2.gif) no-repeat right center;
width: 100%;
}
</style>
HTML<div class="form-group">
<input type="text" name="name[]" autocomplete="off">
<div class="loader"></div>
<div class="result"></div>
</div>
<div class="form-group">
<input type="text" name="name[]" autocomplete="off">
<ul class="result"></ul>
</div>
jQuery<script>
$(function() {
$("input").keyup(function() {
// GET A REFERENCE TO THE <input> THAT TRIGGERED THE EVENT
var jqo = $(this);
// GET THE VALUE
var input = jqo.val();
// FIND THE result <div> FOR THIS <input>
var parent = jqo.closest('div');
var result = parent.find('.result');
if (input.length > 3) {
var loader = parent.find('.loader').show();
// GET DATA FROM SERVER
$.ajax({
type: 'POST',
url: 't2185.php',
data: {
name: input
}
})
// .success IS ON ITS WAY OUT
// I PREFER promise INTERFACE
.done(function(data) {
// data IS PLAIN HTML SO ADD IT TO OUR
// result WINDOW
result.html(data);
result.data('input', jqo);
loader.hide();
})
}
// THE REST IS THE SAME
if (input.length < 1) {
result.html("");
}
});
$('.result').on('click', function(evt) {
$(this).data('input').val(evt.target.textContent);
this.textContent = '';
});
});
</script>
<div class="form-group">
<input type="text" name="name[]" autocomplete="off">
<div class="loader"></div>
<div class="result"></div>
</div>
<div class="form-group">
<input type="text" name="name[]" autocomplete="off">
<ul class="result"></ul>
</div>
<div class="form-group">
<input type="text" name="name[]" autocomplete="off">
<div class="loader"></div>
<div class="result"></div>
</div>
<div class="form-group">
<input type="text" name="name[]" autocomplete="off">
<div class="loader"></div>
<div class="result"></div>
</div>
<div class="form-group">
<input type="text" name="name[]" autocomplete="off">
<ul class="result"></ul>
</div>
<div class="form-group">
<input type="text" name="name[]" autocomplete="off">
<ul class="result"></ul>
</div>
Note the latest sample does not have a .loader DIV because we are styling the <input> directly..success IS ON ITS WAY OUT
jqo.removeClass('loader').hide();
jqo.removeClass('loader').prop({disabled: false});
jqo.removeClass('loader')
- it removes the class that adds the spinner to the <input>jqo.removeClass('loader').hide()
you are saying hide the <input>.Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.
What you're asking about here has always been thorny in jQuery (a 12-year old library) and has been perfectly solved by AngularJS (a 5-year old library). Â AngularJS gives you two way data bindings between the view and the model. Â A change in either is reflected in the other. Â So you don't have to deal with the problem of which selector goes with which input - you just bind a new input to the generated input control and bind a new output to the generated response area. Â Instead of starting with HTML (which was never designed for dynamic views) and using JavaScript (jQuery) to manipulate named elements, with AngularJS you build the DOM in real time, in the client browser. Â Typically server communication is with AJAX requests and JSON. Â It's not easy to learn AngularJS, but it's very cool when you see it in action.
https://angularjs.org/