Displaying text in text field when clicking on ajax search result
When a user types into a text field, results start showing from the database via AJAX. When they click on a result, I want it to show up in the text field. I have used this to show a static value so it seems to be the right idea but I don't know how to get the dynamic value from the database into the text field:
Obviously I need to put something into val()
The php :
$('#result' + textfield_value).click(function() {
$('#search' + textfield_value).val();
});Obviously I need to put something into val()
The php :
if(isset($_POST['search'])) {
$search = "{$_POST['search']}%";
$stmt = $link->prepare("SELECT `lost_time_desc` FROM `lost_time_reasons` WHERE `lost_time_desc` LIKE ?");
$stmt->bind_param("s", $search);
$stmt->execute();
$result = $stmt->get_result();
$numRows = $result->num_rows;
if($numRows > 0) {
while($row = $result->fetch_assoc()) {
$lost_time_reason = sanitize($row['lost_time_desc']);
echo "<li>" . $lost_time_reason. "</li>";
}
}
$stmt->close();
}ASKER
Hey Rob,
Thanks. I had not tried that but upon trying your code what happens is that if there are 2 search results and I click on one, it adds both to the text field instead of just the one I clicked on.
Thanks. I had not tried that but upon trying your code what happens is that if there are 2 search results and I click on one, it adds both to the text field instead of just the one I clicked on.
Can you please post the html that's returned from the php script. ie what "text()" actually refers to. Sounds like I need to drill down a bit further but I'm not sure what to aim at :)
eg for arguments sake if your php script returns:
<ul>
<li>result one</li>
<li>result two</li>
</ul>
and the click happens on the <ul> element then yes, you'll see both results
eg for arguments sake if your php script returns:
<ul>
<li>result one</li>
<li>result two</li>
</ul>
and the click happens on the <ul> element then yes, you'll see both results
ASKER
Also, when choosing an option, the list of options should disappear but it doesn't.
If I try this:
it removes the list of results but also removes whatever was in the text field too.
If I try this:
$('#result' + textfield_value).click(function() {
$('#search' + textfield_value).val($('#result' + textfield_value).text());
$('#result' + textfield_value).html('');
});it removes the list of results but also removes whatever was in the text field too.
ASKER
Not sure if this is what you are after?
<input id='search1' class='searchBox' name='search[]'type='text' autocomplete='off' onKeyUp='ajax_call("1")'><div style='display:none' id='loading1'><img src='functions/loading.gif'/></div><ul class='search-result' id='result1'></ul>
<input id='search2' class='searchBox' name='search[]'type='text' autocomplete='off' onKeyUp='ajax_call("2")'><div style='display:none' id='loading2'><img src='functions/loading.gif'/></div><ul class='search-result' id='result2'></ul>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks so much Rob. I have tried it out and what is happening now is that when I click on an item, it removes that item from the search results list and doesn't put anything into the text field.
ASKER
Oh, hang on. Just saw your second post now. That seems to be working !:)
$('#result' + textfield_value).on('click', 'li', function(e) {
$('#search' + textfield_value).val($(e.target).text());
$(e.target).siblings().remove();
$(e.target).remove();
});
$('#search' + textfield_value).val($('#r