I have run into a problem. I don't know if I am doing something wrong, but when I use a data source that is in JSON format (either inline on the page or calling an agent on the server that return JSON), the MagicSuggest box renders a blank dropdown, containing one blank entry/row:

As soon as I click in the field, the empty dropdown goes away, and I have access to all the values. I tried to set focus programatically, but that made no difference.

My code is below. Where it says Computed Value (with less-than and greater-than before/after), IBM Domino (my server/publishing system) will fill in values before sending the HTML to the browser. In the value field, I have the current values, in data I have a JSON string (see sample after the code), and in the commented out line (where I did the Ajax call) I simply pass the path of the database/application and the ID of the person I am performing the lookup for. That URL does return valid JSON.

var DSM4Axis1 = $('#DSM4Axis1').magicSuggest({
    name: 'DSM4Axis1',
    value: [<Computed Value>],
    data: [<Computed Value>],
    resultAsString: true,
    required: true,
    width: 630,
    maxDropHeight: 200,
    displayField: 'description',
    valueField: 'id',
    sortOrder: 'description'
    //data: '/<Computed Value>/ajax_GetDSM4Codes?OpenAgent&Axis=1&ClientUNID=<Computed Value>'
});

This is what is being sent to the browser:

value: ['V62.3'], data: [{"id":"290","description":"Dementia of the Alzheimer's Type, w/ Late Onset, Uncomplicated"},{"id":"290.1","description":"Dementia Due to Creutzfeldt-Jakob Disease"},{"id":"290.1","description":"Dementia Due to Pick's Disease"},{"id":"290.1","description":"Dementia of the Alzheimer's Type, w/ Early Onset, Uncomplicated"},{"id":"290.11","description":"Dementia of the Alzheimer's Type, w/ Early Onset, w/ Delirium"},{"id":"290.12","description":"Dementia of the Alzheimer's Type, w/ Early Onset, w/ Delusions"},{"id":"290.13","description":"Dementia of the Alzheimer's Type, w/ Early Onset, w/ Depressed Mood"}],

You can test it your self. The site is http://fosterware.net, login as "Github Tester", with the password "github". Click on the client name "Magic Suggest", select the Assessment tab and you can see that the Axis I and Axis II fields exhibit the above mentioned characteristic.

Note: if I just add regular data values, it works, but I need to display a long description but store only the code.

Hi! I noticed today that the comma consistently adds new. I did not find any information about it on the latest version, so I left looked a little source code magicsuggest and I modified 1382 line like this so you do not have commas:

// if no selection or if freetext entered and free entries allowed, add new obj to selection
                        if(inputValid === true && cfg.allowFreeEntries === true) {
                            obj[cfg.displayField] = obj[cfg.valueField] = freeInput.trim().replace(',','');
                            ms.addToSelection(obj);
                            ms.collapse(); // reset combo suggestions
                            ms.input.focus();
                        }
                        break;

It may not be the best solution, but I wanted to report the problem.

Hi !

First, thank you for magicsuggest, it's really usefull ! I was trying to do the following :

        ms = $("#tag-selector").magicSuggest({
            data: "http://my-website.tld/tag-autocomplete-service"
            value: $("#my-input-hidden-with-tags").val().split(','),
        });

but i was unable to set the initial value in the magicsuggestion box unless i'm using a static data set ( ["foo","bar","hello"] ) and my intial values are in this static data-set

is there a way to set initial value while data is fetch through a remote service that provides values based on ?query parameter and not all possible values (too large)

I hope it's understandable ;-)

Hi.

I'm trying to put your js library in a project, with jquery 3.1.1 and I just noticed that it gives an error, since from version 3 of jquery you can not use the size() method [https://github.com/Eonasdan/bootstrap-datetimepicker/pull/1664].

Starting from 3+ you must use the length property instead of the size() method.

Therefore, you have to restrict the library for use with jquery> = 1.8 and <3 and recompile the library with that change so you can use it with jquery 3+. The change only affects 2 lines of code and I have tried it and it works correctly.

Thank you very much.

Regards, Hector.

I want to initially load data, then the user can check boxes to filter what appears in the magic suggest dropdown. I need to either hide/show, or reload. Can MagicSuggest do this?

Just updated the min version of Magic Suggest and suddenly getting this error.

Uncaught SyntaxError: Unexpected token ,

This is the javascript that initiates the MB.

$("body").on('focus', '.event_servers', function(e){

    var curServers = $(this).val().split(',');

    console.log(curServers);

    if($serverList.indexOf('You do not have permission!') == -1){

        var ms = $(this).magicSuggest({
            data: $serverList,
            selectionPosition: 'right',
            allowFreeEntries: false,
            useTabKey: true,
            typeDelay: 200,
            value: curServers
        });

    } else {
        $(this).attr('type', 'hidden');
        $(this).after('<p>You do not have permission to select a server or a server was not assigned to you.<\/p>');
    }


});

This is within tabs, so need to only initiate the MB when a tab is opened. Yet on the previous version that I had it was working BUT, if there was a single number like 29, it was splitting it into 2 & 9 unless there were 2 consecutive numbers like 29,30. I updated the script to find that I then get the above error, so going back to the older version and still struggling to fix the problem.

Many thanks,

Hi Nicolas, I need your help to resolve an issue which I've been trying to figure out for a day now. I have few magicsuggest boxes which contain some data and I need to select some of them when the page loads. Actually I'm setting selected data into a cookie and the next page load I need to set the values which i have selected previously to the particular combo box.

This is the maggicsuggest init source;

var htlFacilities = $("#htlFacilities").magicSuggest({ data: COMMON_DATA_SEARCH_URL, dataUrlParams: {type:4,maxRows:10}, valueField: 'code', allowFreeEntries: false, name: 'htlFacilities' });

and in the next page load I'm trying to do something like this

$("#htlFacilities").magicSuggest({ data: COMMON_DATA_SEARCH_URL, dataUrlParams: {type:4,maxRows:10}, valueField: 'code', editable: false, name: 'htlFacilities', value: [spHotel.htlFacilities]
});

spHotel.htlFacilities is values from cookie.

is there any way to select values from loaded magicsuggest box? please help

Hey Everyone,

I can't get the plugin to work with values that should be in for default.

It works when using local data. But when I pull the data from a url (json) the default values dissapear. Any suggestions?

I am totally new in development

=========>index.html

    <link href="magic/magicsuggest-min.css" rel="stylesheet">
    <script src="magic/magicsuggest-min.js"></script>

</head>
<body>
    <br/>
    <form action="subscribe.php" method="post">
        <div class="form-group">
            <label>Custom placeholder</label>
            <div id="site"></div>
        </div>
    </form>
</body>

===========> magic.js

Please Help me friends

output:

Hi,

[tried in latest chrome & firefox] I have two magicsuggest initialized in one page: say first one is at row 1, and the other one is at row 2. the layout is like:

magicsuggest_1 magicsuggest_2

The issue is that: when click on the first magicsuggest, in the dropdown, the magicsuggest_2's input box is displayed.

I tried to manually add a higher z-index to magicsuggest_1, then it behaves properly. However, it's too handy when i have many magicsuggest in a page.

So, my question is : do we have a way to avoid this automatically at the plugin level.

Thanks, Shenghu

Hello,

I am having an issue with the last version of maggicsuggest 2.1.6; when I click on the area of the selection and click back outside (anywhere on the body of my page) I got this:

Cannot read property 'indexOf' of undefined: => on this part of the code:

$("body").on('click', function (e) { if (ms.container.hasClass('ms-ctn-focus') && ms.container.has(e.target).length === 0 && $(e.target).attr('class').indexOf('ms-res-item') < 0 && **** this cause the isssue **** $(e.target).attr('class').indexOf('ms-close-btn') < 0 && ms.container[0] !== e.target) { handlers._onBlur(); } });

Changing this to 2.1.5 version fix my issue:

$("body").click(function(e) { if(ms.container.hasClass('ms-ctn-focus') && ms.container.has(e.target).length === 0 && e.target.className.indexOf('ms-res-item') < 0 && e.target.className.indexOf('ms-close-btn') < 0 && ms.container[0] !== e.target) { handlers._onBlur(); } });

I am running jquery 3.6; Am I missing something? Maybe the error is on my side

Best regards,

I want to add support for the paste event in magicsuggest.

I added this code to magicsuggest.js:

ms.container.on('paste', $.proxy(handlers._onPaste, this)); ...

_onPaste: function (e) {
                ms.expandForPasteEvent();
             },

...

 this.expandForPasteEvent = function () {
            if (!cfg.expanded) {
                this.combobox.appendTo(this.container);
                self._processSuggestions();
                cfg.expanded = true;
                $(this).trigger('expand', [this]);
            }
          };

But it doesn't work in every case. Maybe there's an easier way to do it?

Hi I want request to my service with your plugin.My service return 20 exist record and if exist greater than 20 only show 20 records and show all exist record in total fields.I want to use lazy load when if total fields greater than 20 and again request to service for add next 20 records.How can i resolve this issue with your plugin? thanks

Not sure if this plugin is still receiving maintenance, but I'm having an issue when setting allowFreeEntries to false, the thing is that based on the example of the usage of this property on the demo page, when setting allowFreeEntries to false as soon as you write something that does not match with some of the items in the input list and then you leave the input, the input content is cleaned, but when trying that locally, using the latest version that this repo has, the behavior is not what I mention... The input keeps its value despite the aforementioned property is set to false. So my question is, does the demo page have a different version of this plugin? What can I do to have this working as expected?

Hi I have a list on which a data is fetched from server say [{id: "39", tagname: "Seller"}, {id: "4", tagname: "Financier"}, {id: 57,tagname: "Builder"}, {tagname: "Broker"}]

The above example fetched 3 records having id as 39,4,57 with values 'Seller",Financial,Builder respectively, new tag was entered 'Broker" which was not part of the data.

On Selection Change event an ajax request was sent to server to get the new Id of "Broker" as 87,

i tried using setSelection (with all 4 records) but it is not working properly , please suggest, i need to set the selection of the magicsuggest with new id received from the server as so that when i use getSelection(), it should returen with updated json object as [{id: "39", tagname: "Seller"}, {id: "4", tagname: "Financier"}, {id: 57,tagname: "Builder"}, {id:87,tagname: "Broker"}]

where i am doing wrong

I'm trying to programmatically select an element in a combo box powered by MagicSuggest.

The following code, the first time gives an error, the second time works as expected, the third time gives error, the fourth time works, and so on:

citta = $('#ms_citta').magicSuggest().getData().find(x => x.name === 'Genova');
$('#ms_citta').magicSuggest().setSelection(citta);

The error is:

Uncaught TypeError: Cannot read property 'cap' of undefined
    at MagicSuggest.eval (eval at <anonymous> (eval at <anonymous> (eval at <anonymous> (VM8367 jquery.min.js:2))), <anonymous>:113417:26)
    at MagicSuggest.dispatch (eval at <anonymous> (eval at <anonymous> (eval at <anonymous> (VM8367 jquery.min.js:2))), <anonymous>:3:8549)
    at MagicSuggest.r.handle (eval at <anonymous> (eval at <anonymous> (eval at <anonymous> (VM8367 jquery.min.js:2))), <anonymous>:3:5252)
    at Object.trigger (eval at <anonymous> (eval at <anonymous> (eval at <anonymous> (VM8367 jquery.min.js:2))), <anonymous>:3:7650)
    at Object.e.event.trigger (eval at <anonymous> (eval at <anonymous> (eval at <anonymous> (VM8367 jquery.min.js:2))), <anonymous>:2:6732)
    at MagicSuggest.eval (eval at <anonymous> (eval at <anonymous> (eval at <anonymous> (VM8367 jquery.min.js:2))), <anonymous>:3:15517)
    at Function.each (eval at <anonymous> (eval at <anonymous> (eval at <anonymous> (VM8367 jquery.min.js:2))), <anonymous>:2:2975)
    at e.fn.init.each (eval at <anonymous> (eval at <anonymous> (eval at <anonymous> (VM8367 jquery.min.js:2))), <anonymous>:2:835)
    at e.fn.init.trigger (eval at <anonymous> (eval at <anonymous> (eval at <anonymous> (VM8367 jquery.min.js:2))), <anonymous>:3:15493)
    at MagicSuggest.removeFromSelection (eval at <anonymous> (eval at <anonymous> (eval at <anonymous> (VM8367 jquery.min.js:2))), <anonymous>:1:3563)