Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need to make a selectable search box

    Hi guys,

    This is my first post on a forum here so im new lol,

    My basic dilemmna/problem is im trying to make a search box that pulls data from a text file and creates a sort of overlay display. I need this data to be selectable. Basically my text file has a list of names, and i want people to type in any string of letters in the search box and if my text file has a name in their that matches the person's search query itl show up below. I then want people to be able to simply select a name as if it were a basic html input. Im doing this for an e commerce site i run and im just trying to include this in my shopping cart page. If anyone would like a live working example of what i want, reply and i can send u a link.

    I'm not trying to get anyone to do this for me, im just hoping someone can point me in the right direction. Please note that know a decentish amount of html/css but i have no knowledge at all of javascript and that my ecommerce site does not support php. It uses a custom language called liquid. I would appreciate any answers that go a bit beyond giving me coding terms i probably dont know

    Thank You

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Hey,

    Sounds like you are looking for an auto-complete feature. No point in reinventing the wheel.

    http://jqueryui.com/autocomplete/

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,880
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    Please note that before you think about adding JavaScript features, think about how you would approach this without JavaScript. It has to work in a basic way at least before you can enhance it. This is called progressive enhancement.

    So, first steps are to think about user interaction:
    1. Visitor enters search term into a search field and submits the form.
    2. A new page is loaded (or the same page reloaded) with an overlay and the relevant search results that can be selected (possibly with checkboxes, i. e. it has to be a form again?). Upon selecting the results, visitor submits the form and whatever you are trying to achieve happens.
    3. Canceling the overlay/results thingy reloads the page in its original state.


    This can all be done with a server side script and without the need of JS. If that’s achieved then you can enhance that functionality in that a JavaScript autocomplete/autosuggestion feature is added that loads the results in an overlay with AJAX without reloading the page.

  • #4
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi,

    Ok so i took a look at that link and i think i would be able to add that autocomplete feature itself , my problem is the source of the info, the link you gave was seperated into several parts , one was "source" which talked about the kind of info you could use,etc.. im still confused on how i would set the source to my simple text file, any insight you could give on that?

  • #5
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok i see what you mean, unfortunately this will be going on a shopping cart page and i cant have these redirects and stuff, it would be to confusing for a customer, just to clarify il send a link of what im looking for exactly,

    if you go to this link: http://http://www.fifacointrader.com...ate-team-coins , when u get there just immediately click the grayish 'add to cart' button , then you will be redirected to the shopping cart, once there click the green button in the checkout section, after that a search text box will apear like the one im looking for, notice if you type something into it like a common name such as john, it will come up with a list of similair names.

    That is exactly what im looking for. If you select a name theres no redirect and it works like a normal html input.

    Any new advice? or was that what you had in mind the whole time?

  • #6
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Hey,

    There's no redirect with autocomplete. It populates the input field with the value chosen. It's really easy to implement even if you don't have any JavaScript knowledge.

    First off how are you getting the list from your text file? What server side language are you coding in? If you already know how to pass the data list to your view from the controller/server than its smooth sailing from there.

    Just place these scripts inside your <head> tag:

    Code:
     
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
    $(function() {
    var availableTags = [${passInYourListHere}];
    $( "#tags" ).autocomplete({
    source: availableTags
    });
    });
    </script>
    Then where you want the input to be add this HTML:

    Code:
    <div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" />
    </div>
    You can also customize the theme to your site. http://jqueryui.com/themeroller/

  • #7
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @sean


    Ok see thats my exact problem! I dont know how to pull data from the text file! thats my question haha, all this server side script stuff i clueless bro, ik how to implenent the jquery stuff , but not the text file

  • #8
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Well see that's a different story. I have no clue what language your site is using. Nor do you probably lol. I'm guessing you are using a CMS like WordPress or something?

    Just message me and I'll see if I can help.

  • #9
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hahaha, not that clueless lol, i use html obv and a language called liquid, its a special language that replaces php for some ecommerce sites, actuyally my only problem now is my search input literally has like i think 10,000 possible options and its gona take forever to wrap them in option tags, any shortcuts u know?

  • #10
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    If you are using autocomplete I don't know why you would need a select list with option tags.

    Anyway, if you haven't found out already you need to use a for loop. Change listName to the name of your list.

    Code:
      {% for name in listName %}
          {{ name }}
      {% endfor %}


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •