sergiodlopes / jquery-flexdatalist

Flexible input autocomplete/datalist plugin for jQuery
http://projects.sergiodinislopes.pt/flexdatalist/
MIT License
365 stars 84 forks source link

Loading remote data through "url" option always return "no result" #220

Closed ninsuo closed 4 years ago

ninsuo commented 4 years ago

Hello there,

I'm currently optimising a big form and I'm struggling since few hours with the url option. Whatever the results provided by the backend, flexdatalist always returns "no result".

You can reproduce using the following code:

front:

<!DOCTYPE html>
<html lang="en">
<body>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-flexdatalist/2.2.4/jquery.flexdatalist.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-flexdatalist/2.2.4/jquery.flexdatalist.min.css">

<input id="test" type="text" />

<script type="text/javascript">

        $('#test').flexdatalist({
            url: 'http://127.0.0.1:8002/test.php',
            data: {},
            requestType: 'post',
            params: {
                structureId: 42,
            },
            minLength: 1,
            cache: false,
            multiple: true,
            textProperty: '{firstName} {lastName} ({tags})',
            valueProperty: 'nivol',
        });

</script>

</body>
</html>

backend:

<?php

header('application/json');

echo '
{
   "results" : [
      {
         "nivol" : "342302R",
         "firstName" : "Alain",
         "lastName" : "Tiemblo",
         "tags" : "US, PSC1"
      }
   ],
   "options" : []
}
';

I've been trying with many sets of options without any result.

        $('#test').flexdatalist({
            url: 'http://127.0.0.1:8002/test.php',
            data: {},
            requestType: 'post',
            params: {
                structureId: 42,
            },
            minLength: 1,
            focusFirstResult: true,
            cache: false,
            selectionRequired: true,
            multiple: true,
            textProperty: '{firstName} {lastName} ({tags})',
            valueProperty: 'nivol',
            visibleProperties: ['firstName', 'lastName', 'tags'],
            noResultsText: 'No result',
        });

Am I missing something? Cheers

ninsuo commented 4 years ago

Found the issue, I was lacking the searchIn option.

            searchIn: ['firstName', 'lastName'],

I didn't expect that flexdatalist was performing another search after the one done remotely. Tough one.

Cheers