Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

(solved) Autocomplete TextFields: How can you get it to work?


Go to End
Reply


21 Posts   4207 Views

Avatar
BlueScreen

Community Member, 36 Posts

16 March 2011 at 11:38am

Edited: 16/03/2011 11:40am

Since I am new to Silverstripe, I don't know what the whole fiasco is with Silverstripes native Autocompletetextfields and why they have been depreciated. I missed out on any sort of consensus on what to do about that and what will be done in the future. Can someone please point what the currently recommended alternative is for autocompleting/autosuggesting textfields?

I am aware of:

ss-formfields (http://silverstripe.org/silverstripe-formfields-module/) (http://code.google.com/p/ss-module-formfields/)
balbus designs adaption of formfields (http://www.balbus.tk/autocomplete-with-jquery-ui/)
and tag field (http://www.silverstripe.org/tag-field-module/)

But which one works best? Which one is easier to install and has plenty of documentation? What other options do I have?

I'm trying to get formfields working at the moment but the output of each autosuggest is 'Failed to load source for: [root]/index/field/[textbox]/suggest?=[params]'. I'm not sure what I am missing. Full documentation seems to be hard to come by

Avatar
BlueScreen

Community Member, 36 Posts

16 March 2011 at 1:30pm

Edited: 16/03/2011 1:31pm

Getting autocomplete to work is insane. After installing formfields in multiple locations and trying various tweaks to the jquery I tried adapting the changes made by balbus (http://www.balbus.tk/autocomplete-with-jquery-ui/) . I borrowed the code he used for AutocompleteField.php and .js and placed the files in the same directories as he did.

Results were still the same:

'Failed to load source for: [root]/index/field/[textbox]/suggest?[params]'

I think the code would have worked if it were not for some dependency that I may be missing (from my experience that is what 'failed to load source' usually means) I have absolutely no idea what it might be though, I have all the jquery files I need and they are referenced correctly.

Lastly I am going to try Tag field. I hope I won't have to resort to an autocomplete solution that relies on plain a HTML form instead of silverstripes PHP generated ones since that's asking for a complete overhaul of the entire interface.

Avatar
BlueScreen

Community Member, 36 Posts

16 March 2011 at 2:31pm

Edited: 16/03/2011 2:34pm

Tag field: same problem. So far all three give me a 'failed to load source' error as soon as the jquery runs after I enter text into the field.

All these errors are related. I suspect just one simple thing that is preventing other modules from accessing my module, possibly somewhere in config settings

Avatar
ajshort

Community Member, 244 Posts

16 March 2011 at 2:41pm

I'm guessing you're using Firebug. The "Failed to load source" errors aren't actually server generated - sometimes Firebug can't load the response data and as such will just return that string. The requests could be completing successfully, you just can't see the response data. There might be a mis-configuration, or you might need to upgrade Firebug. You could also try using web inspector or the like on chrome/safari.

Avatar
BlueScreen

Community Member, 36 Posts

16 March 2011 at 3:14pm

You are right, I am using firebug. Though I can tell the request are not completing because after running the jquery, dozens of requests get sent out that carry the variable but none of them come back with a response. This goes on until the the request time limit is hit.

Chrome gives me the same error message in its own console

A mis-configuration is most likely. I had to guess how these modules were installed, I can't find any good documentation on how to properly set up an autocomplete field

Avatar
BlueScreen

Community Member, 36 Posts

16 March 2011 at 4:05pm

Edited: 16/03/2011 4:09pm

based on my previous hunch that the fieldform module could not communicate with my custom module, I abandoned my constant config tinkering and just merged the fieldform files into my module.

fieldform/Code -> mymodule/Code, fieldform/Javascript -> mymodule/Javascript and so on.

That seemed to resolve the 'Can't load resource' business

It ain't fixed yet though, Strangely enough the response I get back from fieldform is the same webpage that my form is sitting in so the autosuggest is putting the entire webpage inside that dropdown list. It's kinda like a recursive autosuggest.

Avatar
martimiz

Forum Moderator, 1132 Posts

17 March 2011 at 2:24am

Edited: 17/03/2011 2:25am

As for the 'architecture' of SilverStripe modules, check this:

http://doc.silverstripe.org/sapphire/en/topics/module-development

You can always use the mysite directory to store SilverStripe code: add php classes to mysite/code/ and javascript to mysite/javascript/ and you're good to go. Always do a /dev/build/?flush=1 after adding any php code to update the database.

I did the balbus adaptation of http://code.google.com/p/ss-module-formfields/ when I found there was no official SS alternative and I'm still using it in the cms (FireFox). There aren't any guaranties though :-) Make sure you add the php and the javascript file as explained above. Then:

After you add a field to the page like this:

static $db = array(
   'MyField' => 'Varchar'
)

You add the field to the getCMSFields function as below. It will then suggest values that have been entered into the MyField field on other pages.

$fields->addFieldsToTab('Root.Content.Main', array(
   new AutocompleteField(
      $name = 'MyField',
      $title = 'Enter a value'
   )
));

Avatar
BlueScreen

Community Member, 36 Posts

17 March 2011 at 9:30am

Edited: 17/03/2011 10:20am

I'm using the Balbus adaption now, it seems like the most promising candidate so far,

If you have any complete working code examples of it, I would love to see what you did :)

Currently I installed the formfield files in my modules directory then tweaked them with Balbus's code. I did have them in the mysite directory at first but for some reason that wouldn't work (See first 3 posts)

I always ran dev/build?flush=1 each time I moved file contents around

Now regarding the example you set here:

static $db = array(
'MyField' => 'Varchar'
)

$fields->addFieldsToTab('Root.Content.Main', array(
new AutocompleteField(
$name = 'MyField',
$title = 'Enter a value'
)
));

This is a different format compared to what I am using.

My form looks like this instead:

$fields = new FieldSet(
[other fields]
new AutocompleteField(
$name = 'MyField',
$title = 'Enter a value'
)
[other fields]
);
$form = new Form($this, [name], $fields, $actions, $validator);

Is it absolutely important that write my forms in the format you specified?

Also did you ever need to rename some things in order to avoid conflict with the original AutocompleteField? I think that is what is happening to my current autocomplete field.

Even though I declared it like this:

new AutocompleteField(
$name = 'City',
$title = 'Enter the name of a city'
)

it turns out like this:

<input type="text" value="" name="City" id="Form_BookSector_City" class="text autocomplete_input {'url' : 'bookingmanager/editprofile'}" autocomplete="off">

When it should be this:

<input type="text" src="/bookingmanager/BookSectorController/index/field/City/Suggest" autocomplete="off" value="" name="City" id="Form_BookSector_Author" class="text AutocompleteField">

I bolded the part that is causing the autocompletefield to autosuggest an entire web page. The editprofile page is being linked in the fields class for some reason

The bold part is coming from another file outside of my module and it is overriding what the formfield code originally set. Let me see if I can find it again, I spotted the offending code yesterday but I forgot where it was.

Go to Top