auto-complete-django-view

auto-complete-django-view.py

def serchView(request):
    query = request.GET.get("query")
    print(query)
    # queryset_list = super(PostListAPIView, self).get_queryset(*args, **kwargs)
    queryset_list = Tutorial.objects.all()  # filter(user=self.request.user)
    if query:
        queryset_list = queryset_list.filter(
            Q(title__icontains=query) |
            Q(content__icontains=query)
        ).distinct()
    print(queryset_list)
    data = {}
    data["query"] = query
    sugList = []
    for obj in queryset_list:
        instance = {"data":obj.title,"value":obj.title}
        sugList.append(instance)
        print(sugList)
    jsonData = {
        'query': query,
        'suggestions':sugList
    }
    return JsonResponse(jsonData)

auto-complete-suggestion-output.json

//  query url : https://buildfromzero.com/tutorials/search/?query=mac

{
	"suggestions": [
		{
			"data": "Basic Linux Commands",
			"value": "Basic Linux Commands"
		},
		{
			"data": "How to set up Endpoints to vm on Azure ?",
			"value": "How to set up Endpoints to vm on Azure ?"
		},
		{
			"data": "How to create Ubuntu server 16.04 Lts in the Azure ?",
			"value": "How to create Ubuntu server 16.04 Lts in the Azure ?"
		},
		{
			"data": "How to configure MQTT using Mosquitto, on your local PC or MAC ?",
			"value": "How to configure MQTT using Mosquitto, on your local PC or MAC ?"
		},
		{
			"data": "How to use BLE on raspberry pi 3 ?",
			"value": "How to use BLE on raspberry pi 3 ?"
		},
		{
			"data": "How to remove allowed host from your Mac ?",
			"value": "How to remove allowed host from your Mac ?"
		},
		{
			"data": "How change timezone in linux using command line ?",
			"value": "How change timezone in linux using command line ?"
		},
		{
			"data": "How to configure PostgreSQL for Django development ?",
			"value": "How to configure PostgreSQL for Django development ?"
		}
	],
	"query": "mac"
}

working-code.html

 <form class="search-container" method="get" action="/search/">
    <input type="text" name="q" id="autocomplete-ajax" placeholder="Search anythig" style="position: absolute; z-index: 2; background: transparent;"/>
    <input type="image" class="search-icon" src="/media/tomvictor/drive/search-icon.png">
</form>

 <script type="text/javascript" src="/static/autocomplete/scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/static/autocomplete/scripts/jquery.mockjax.js"></script>
    <script type="text/javascript" src="/static/autocomplete/src/jquery.autocomplete.js"></script>
    <script>

        var countriesArray ;

        var apiUrl = "/tutorials/search/";
        var jsonData;
        var objData;
        var nextpage;
        console.log(objData);
        //initial ajax loading

        // Initialize ajax autocomplete:
        $('#autocomplete-ajax').autocomplete({
            serviceUrl: apiUrl,
            // lookup: countriesArray,
            lookupFilter: function (suggestion, originalQuery, queryLowerCase) {
                var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
                return re.test(suggestion.value);
            },
            onSelect: function (suggestion) {
                $('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
            },
            onHint: function (hint) {
                $('#autocomplete-ajax-x').val(hint);
            },
            onInvalidateSelection: function () {
                $('#selction-ajax').html('You selected: none');
            }
        });

    </script>