Search the Community
Showing results for tags 'Autocomplete'.
Found 10 results
-
After forgetting the class name of the wonderful AdminPageFieldEditLinks module for what feels like the 100th time I decided I needed to give my failing memory a helping hand... Autocomplete Module Class Name Provides class name autocomplete suggestions for the "Add Module From Directory" and "Add Module From URL" fields at Modules > New. Requires ProcessWire >= v3.0.16. Screencast Installation Install the Autocomplete Module Class Name module. Configuration Add Module From Directory Choose the type of autocomplete suggestions list: "Module class names from directory" or "Custom list of module class names". The latter could be useful if you regularly install some modules and would prefer a shorter list of autocomplete suggestions. The list of class names in the modules directory is generated when the Autocomplete Module Class Name module is installed. It doesn't update automatically (because the retrieval of the class names is quite slow), but you can use the button underneath when you want to retrieve an updated list of class names from the directory. Add Module From URL If you want to see autocomplete suggestions for the "Add Module From URL" field then enter them in the following format: [autocomplete suggestion] > [module ZIP url] Example: RepeaterImages > https://github.com/Toutouwai/RepeaterImages/archive/master.zip Awesomplete options The "fuzzy search" option uses custom filter and item functions for Awesomplete so that the characters you type just have to exist in the autocomplete suggestion item and occur after preceding matches but do not need to be contiguous. Uncheck this option if you prefer the standard Awesomplete matching. Custom settings for Awesomplete can be entered in the "Awesomplete options" field if needed. See the Awesomplete documentation for more information. https://github.com/Toutouwai/AutocompleteModuleClassName https://modules.processwire.com/modules/autocomplete-module-class-name/
- 8 replies
-
- 23
-
-
-
-
- module
- autocomplete
- (and 3 more)
-
Hello everyone, I always wanted to try out an ajax autocomplete search function, but never knew where to start. Of course there is the Ajax Page Search module by soma, but it seems that it was build around the basic site profile. In my case I wanted something more custom and I discovered in this thread the jQuery Plugin Typeahead by RunningCoder, which seemed to be nice. After many hours figuring out, how to combine this Plugin with ProcessWire, I finally got it implemented and want to share my solution with anyone, who also struggles with this topic. 1. Set-Up Typeahead Download the Typeahead-Plugin from the website (I prefer via Bower) and include the following scripts and stylesheets in your templates: <html> <head> ... <!-- Optional CSS --> <link rel="stylesheet" href="/vendor/jquery-typeahead/dist/jquery.typeahead.min.css"> <!-- Required JavaScript --> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="/vendor/jquery-typeahead/dist/jquery.typeahead.min.js"></script> ... </head> As next step we need the JSON data. 2. Install Pages to JSON To get the necessary data of all pages as JSON, I use the module Pages to JSON, which provides an easy way to output pages as JSON objects. Of course you can achieve this without this module, but I am not very experienced with JSON, so this module was really helpful. After you downloaded and installed the module, you can configure in the module settings page, which fields you want to output. You can select between own and system fields. For my purpose I selected only title and url to be outputted. 3. Output JSON Now, that we have the module configured, we have to output our search suggestions as JSON. I did it in my template file search.php like this: <?php namespace ProcessWire; // Check if ajax request if($config->ajax) { $results = $pages->find("has_parent!=2"); // Find all published pages and save as $results header("Content-type: application/json"); // Set header to JSON echo $results->toJSON(); // Output the results as JSON via the toJSON function } else { // Your own front-end template } To sum up, we search the pages we want as search suggestions and save them in a variable. Then we output them with the toJSON-Function by the Pages to JSON-Module. All of this happens in a Ajax-Request, that is the reason why we check first, if the page is called via an Ajax request. 4. Insert Form We can now embed the HTML form anywhere you want. Either in an header-include or a specific template. Also you can use your own classes, for this example I used the Typeahead-demo-mark-up and extended it a little. <form id="searchform" method="get" action="<?= $pages->get("template=search")->url ?>"> <div class="typeahead__container"> <div class="typeahead__field"> <span class="typeahead__query"> <input id="q" name="q" type="search" placeholder="Search" autocomplete="off"> </span> <span class="typeahead__button"> <button type="submit"> <span class="typeahead__search-icon"></span> </button> </span> </div> </div> </form> The action-attribute in the form-tag is the url of your search-site. This attribute is of course necessary to know where the form redirects you and where the JSON data is located. 5. Initialize Typeahead As last step we have to initialize the Typeahead-plugin jQuery like this: $(document).ready(function() { var actionURL = $('#searchform').attr('action'); // Save form action url in variable $.typeahead({ input: '#q', hint: true, display: ["title"], // Search objects by the title-key source: { url: actionURL // Ajax request to get JSON from the action url }, callback: { // Redirect to url after clicking or pressing enter onClickAfter: function (node, a, item, event) { window.location.href = item.url; // Set window location to site url } } }); }); We save the action url of the form in a variable, then we initialize Typeahead by selecting the input-field inside the form. As the source we can pass the action url and I included the callback, to link the search results with the site urls. Now you should have a nice ajax autocomplete search form, which of course you can further style and configure. I hope I didn't forget anything, but if so, please let me know. Regards, Andreas
- 7 replies
-
- 16
-
-
- typeahead
- autocomplete
- (and 2 more)
-
What could be the reasons why not all pages appear in my page referefence field with page autocomplete? I have a dozen pages that should appear, with a 4-letter string that never show up. My selector should be fine: parent=1041, template=project, id!=id, sort=vertec, include=all Where does it actually look for the suggestions? only default page-title? I tried with title and several other fields, also custom variations for the label, e.g. {vertec}, {title}, {client_name} {year} Q1: In which fields does PW look for autosuggestions? only title? Can it be configurable to look also elsewhere (let's say 3 text fields) Q2: Does my custom labeling actually change anything in the behavior of autosuggest? (I guess not) In my case, I have over 1000 pages under one parent. Using the other option "page-selector" is not a real option (paginate several times...)
-
I am not sure how many established ProcessWire users use the Atom IDE, but since it is free, works on linux, and has the features I like, I decided to install it. It is a very nice and comfortable interface. It would be nice to have the advanced.js provider reference the ProcessWire API directly so that users are always up to date. There are a vast number of similar IDEs, and I don't suggest that ProcessWire 'endorse' any particular one. However, I do think that having such plugins available for a few can only add to the attraction of ProcessWire.
-
Hey y'all! I've been digging through the forums trying to find a workaround for the Page AutoComplete Field. So far, no luck. Here's the problem: Currently, to use the Page AutoComplete Field, you have to define a single parent for the pages you want to select from. I want to use the AutoComplete field to add multiple pages from different parents. For instance, I have a field for location, and I want to add the MET Museum and The Louvre, but the MET has parent USA, and the Louvre has parent France. Currently, it's very labor intensive to scroll through a list of 300+ locations, or use AsmSelect to drill down. AutoComplete would be a godsend. I've not been able to find any way to workaround this issue, any ideas? Thanks for any help or recommendations! — Reed- 1 reply
-
- 1
-
-
- autocomplete
- fields
- (and 3 more)
-
Hi community, i'am not a pro in module creation and i need someone, who build it better. What my stuff at this time does: there is a page "Standard". This Page can upload into OR select Images from "Image Library". The pages inside "Image Library" are simple pages with a imageField (single) inside. The page "Standard" looks like this: "Select existing Images" ist a pageField. The Inputfield is a AutocompleteField with preview oh the selected pages (from "Image Library"). "Image (add if not exists)" is a imageField (multiple) this two fields togehter and some hooks are the core of my project. select a image form the list, or upload a new one. The Module has to parts: The new Autocomplete Inputfield for FieldtypePage and a processing for the imagefield via hooks. Lets start with the ImageField: Upload a Image(s) like everytime in Processwire. After hit "Save": a "Page:saved" hook is checking if the image is already in the Library is checking the basename. if basename already exists, the code compares the two images by pixelanalysis(!) if in Library already: then add the existing Page with this image to the PageField field if not: create a new page with template "Image", add the image there, and add the new page to PageField after all: remove the image from this page (because we linked the image via a page) The pageField is a clone of the existing InputfieldPageAutocomplete, but i extended that with little new function: display images in ___rendeListItem() and the javascript-version after AJAX loading. In my module, you can use as a new label specific string img:{a_image_field.url}:img. This pageField automatically controls the imageField. The selected Parent and Template is the path for new Pages and there Templates. I'am testing a lot with this new components. Works fine. I Like this solution for pages where many images are allways the same (like a product-catalog). Download the zip and have a look. Installation Follow this steps: Install module "InputfieldPageAutocomplete2" install module "ImageUploadOrSelect" create a Template "Image" now we need a unique name for three fields. For example: "loremipsum". create a field of type image, call it "imageuploadorselect_imagetarget_loremipsum". this field is single image field. no array output! add the field "imageuploadorselect_imagetarget_loremipsum" to template "Image". create a field of type image, call it "imageuploadorselect_imagestemporary_loremipsum". this field is multiple. array output! add this field to a template you decide. For example "basic-page". create a new field of type Page, call it "imageuploadorselect_pages_loremipsum". set up this field like in the image above. Parent: a page you decide (where pages with template "Image" will be created) Template: Image Labelfield: custom Custom page label format: {title} img:{imageuploadorselect_imagetarget_loremipsum.url}:img Inputfieldtype: "PageAutocomplete2". add this field to template from step 8, where the imageField also is. I would be very happy if someone could help. How i sad before, i'am not the pro. I looking for somebody who could help me to merge this stuff in one module to share it in the community. I commented all the things in the files. There are a lot of detailed information. Have nice weekend! modules.zip
- 7 replies
-
- 3
-
-
- image
- autocomplete
- (and 2 more)
-
wanna share that new shiny star on the autocomplete horizon... http://leaverou.github.io/awesomplete/ looks very very interesting i think!
- 1 reply
-
- 1
-
-
- autocomplete
- js
- (and 3 more)
-
Hi! I have a problem with the PageAutocomplete field. I have made my pages: -- Clientes (template clientes) ---- Luis Santiago (template cliente) I have the PageAutocomplete field here (cliente_inmuebles) . ---- Second Name ---- Third Name -- Inmuebles (template inmobiliaria) id=1053 ---- Pisos (template tipo_inmueble) ------ Piso nº1 (template propiedad) ------ Piso nº2 ------ Piso nº3 ---- Casa ------ Casa nº1 ------ Casa nº2 ------ Casa nº3 Parent of selectable page(s): Inmuebles. Template of selectable pages : tipo_inmueble. Custom selector to find selectable pages: has_parent=1053, template=propiedad. (Without this selector shows nothing) The list of pages appear and I can select them but when I save I get the error: Page 1058 is not valid for cliente_inmuebles
-
Hi I have a autocomplete field for frontend users I want to search page by their title(by 1st letters) match word in autocomplete field for example I have page structure like........... items --aaa --aab --abb --baa --bba So I want to search aaa, aab and abb when user type a and aaa, aab when aa and when user type b it should return baa and bba . I thik we got the Idea. I use $page->get('/item/')->children('title%='.$input->get->q); but it returns all the pages need help. THANKS
-
Sorry I'm not a GIT user so just posting here what I think is a tiny bug or if not, just something that I noticed. When filling in a title, if you press TAB to use a browser autocomplete suggestion, then the URL stops getting autopopulated. I'm sure you are aware of this and there may be no easy way round it but just thought I'd point it out. A few times I've not paid enough attention and ended up with funny urls!
