问题
I have a jquery autocomplete menu for book searches. The autocomplete is working fine, but I would still like the option of doing a search query (POST data) from the text typed in the text box, by pressing enter, and ignoring the autocomplete suggestions.
I've tried jquery form submit, which always disables the autocomplete menu. I'm not sure what to do.
Below is the code I have now with the autocomplete which is working.
<!DOCTYPE html>
<html>
<head>
<!-- Your web-app is https, so your scripts need to be too -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/stylesheets/style.css" type="text/css">
<script type="text/javascript">
function post(path, params, method ='post') {
// The rest of this code assumes you are not using a library.
// It can be made less wordy if you use one.
const form = document.createElement('form');
form.method = method;
form.action = path;
for (const key in params) {
if (params.hasOwnProperty(key)) {
const hiddenField = document.createElement('input');
hiddenField.type = 'hidden';
hiddenField.name = key;
hiddenField.value = params[key];
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}
$(document).ready(function() {
$("#findBook").autocomplete({
minLength: 0,
scroll: true,
source: function (request, response) {
$.ajax({
method: "GET",
dataType: "json",
url: "https://www.googleapis.com/books/v1/volumes?q=" + request.term,
success: function (data) {
var transformed = data.items.map(function (book) {
return {
title: book.volumeInfo.title,
author: book.volumeInfo.authors,
image: book.volumeInfo.imageLinks.thumbnail
};
});
response(transformed.slice(0, 5));
}
});
},
select: function(event, ui){
//console.log(ui.title);
event.preventDefault();
var id = ui.item.title;
$.ajax({
url: "/book_profile_b/" + id,
type: "POST",
dataType: 'html',
data: { id: id },
success: function(data){
post('/book_profile_b/'+id);
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr.responseText+" - "+thrownError)
alert("ERROR:" + xhr.responseText+" - "+thrownError);
}
});
},
}).autocomplete("instance")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a><img class= 'imageClass' src='" + item.image + "' />" + item.title + " " + "<div class=searchInfo>" + "by" + " " + item.author + "</div>" + "</a>")
.appendTo(ul)
.append('<li><a href="/book_profile/b/'+ this.term + '">Search: '+ this.term + '</a></li>' );
};
});
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="/style.css" type="text/css">
<link rel="stylesheet" href="/home.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans|EB+Garamond|Encode+Sans+Expanded|Inconsolata|Karla|Manuale|Nunito+Sans|Pontano+Sans|Roboto+Slab:300|Rokkitt|Sanchez" rel="stylesheet">
</head>
<body>
<div class="searchBook">
<input type="text" placeholder="Search.." id="findBook" />
</div>
</body>
</html>
来源：https://stackoverflow.com/questions/60960731/submit-data-from-textbox-or-jquery-autocomplete-menu