www.webdeveloper.com
Results 1 to 8 of 8

Thread: I need ideas to setup a solution to find data

  1. #1
    Join Date
    Nov 2017
    Location
    Montreal
    Posts
    14

    Question I need ideas to setup a solution to find data

    Hi all,

    Hopefully this is the right forum...

    I need to show the corresponding cost when its counterpart is chosen.
    I have some data (costs) to show, on the other hand I have their corresponding products.
    I am not too sure which would be the best way to make it work.
    I am guessing with a dropdown list showing the products by name, when one is chosen then it show its corresponding cost.
    The problem I see with that is that the products are well over 100. So that would be a long list. I suppose, while the dropdown list is showing we could enter the first letter of the name of the product to jump to that area and ease the search.
    Can anyone recommend a better way maybe?

  2. #2
    Join Date
    Dec 2012
    Posts
    1,627
    while the dropdown list is showing we could enter the first letter of the name of the product to jump to that area and ease the search.
    This should do what you are looking for:
    https://jqueryui.com/autocomplete/#default

  3. #3
    Join Date
    Nov 2017
    Location
    Montreal
    Posts
    14
    Hi Sempervivum,
    Thanks for the lead
    Please bare with me, I am ok with HTML5 & CSS3, but a total rookie in JS.
    So I see this would resolve the "awkward long list". How would I get it to spit a value (cost) when the name of the product is autocompleted?

  4. #4
    Join Date
    Dec 2012
    Posts
    1,627
    There will shurely be a solution for this requirement.
    I have some data (costs) to show, on the other hand I have their corresponding products.
    In which format is this data available? Do you have something like a text file, a CSV file that can be read automatically or do you want to enter the data manually into the code?

  5. #5
    Join Date
    Nov 2017
    Location
    Montreal
    Posts
    14
    It would have to be in the code

  6. #6
    Join Date
    Dec 2012
    Posts
    1,627
    OK, then you would have to enter it into the code.
    The basic setup for jQuery U's autocomplete is very simple:
    Code:
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        Choose a product: <input id="autocomplete" />
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script>
            var products = [
                { label: "Apple", value: 5 },
                { label: "Banana", velue: 6 },
                { label: "Limon", value: 7 }
            ];
            $("#autocomplete").autocomplete({
                source: products
            });
        </script>
    The cost is entered into the same input where the letters for the product are entered.
    If you want that both, product name and cost, are displayed after selection, this can be achieved by a simple modification.

  7. #7
    Join Date
    Dec 2012
    Posts
    1,627
    Cost being displayed in another input:
    Code:
        Choose a product: <input id="autocomplete" /> Cost: <input id="cost" />
        <script>
            var products = [
                { value: "Apple", cost: 5 },
                { value: "Banana", cost: 6 },
                { value: "Limon", cost: 7 }
            ];
            $("#autocomplete").autocomplete({
                source: products,
                select: function (event, ui) {
                    console.log(ui);
                    $("#cost").val(ui.item.cost);
                }
            });
        </script>

  8. #8
    Join Date
    Nov 2017
    Location
    Montreal
    Posts
    14
    Thank you so much Sempervivum!
    This is amazing!
    I'll give it a go asap!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.18328 seconds
  • Memory Usage 2,907KB
  • Queries Executed 13 (?)
More Information
Template Usage (34):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_code
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (8)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (8)postbit
  • (8)postbit_onlinestatus
  • (8)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates