Also schlage ich das folgende mit Ihrem Preisschieberegler Beispiel vor. Hier sehen Sie ein Beispiel für die Suche nach Benutzern mit nur jQuery.
Sie benötigen natürlich ein Eingabeformular für die Suchanfrage.
<form class="search-form">
<input type="text" name="search" placeholder="Search.." id="search-name">
<button class="search-submit">Go!</button>
<!-- toggleable search options here, including your price slider. -->
</form>
Passen Sie das Aussehen dieser, wie Sie wollen. Wichtig ist hier, dass der Benutzer Text in das Suchfeld eingibt und auf "Go!" Klickt. Sie möchten ein jQuery-Ereignis an diese Aktion anhängen, senden Sie nicht als ein Formular, weil das Ihre Seite neu lädt, die Sie nicht möchten.
$(".search-submit").click(function() {
var url = "/search?name=" + $("#search-name").val();
$.ajax({
method: "GET",
url: url,
success: function (data) {
// Dynamically change your page results with more jquery based on data
},
error: function (err) {
alert("Something went wrong");
}
});
});
Als nächstes benötigen Sie eine URL und View, um diese Ajax-Anfrage zu akzeptieren.
urls.py:
from views.py import search
# Search URL
url((r'^search/$', search),
views.py:
import json
from app.models import User
from django.http import HttpRespons
def search(request):
# Grab the data
query = request.GET.get("name", None)
# Make the query using your backend, the following is just an example
users = User.objects.filter(name=name)
# Serialize the objects as necessary
data = []
for user in users:
data.append({
"name" : user.name,
"age" : user.age,
# Other stuff you want from the objects you retrieved.
})
return HttpResponse(json.dumps(data))
Dies schließt die Schleife. Wenn ein Benutzer eine Suchanfrage eingibt, wird der Ajax einen Aufruf an Ihre Ressource machen, neue Ergebnisse erhalten, und ich werde die dynamische Änderung der Seite Ihnen überlassen.
Dinge zu tun:
- eine Art von "Maske" laden, während Ihre Abfrage abgerufen wird. Kann mit jquery und CSS - Zusätzliche Suchoptionen gemacht werden. Wahrscheinlich am besten als mehr Abfragezeichenfolgen in Ihrer Anfrage, die Sie an den Server vornehmen. Zum Beispiel "/ search? Name = Jack & age = 42".
Sie können dies definitiv mit nur jQuery erreichen, obwohl es mit einem leistungsfähigeren Javascript-Framework wie Angular oder React sauberer sein kann. Planen Sie mehr Funktionen auf Ihrer Website oder nur diese? – Nick
Im Moment bin ich nur mit den Suchfiltern und der Formularübergabe beschäftigt. Später könnte ich noch zusätzliche Funktionalität hinzufügen. Wie kann ich die Suchfunktion mit jQuery/React/Angular ausführen? – Satchel
Lassen Sie mich einige Dinge in der Antwort vorschlagen. – Nick