Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:

إدارة علاقات العملاء
e-Commerce
المحاسبة
المخزون
PoS
المشروع
MRP

All apps

كافة المنشورات الأفراد الشارات

علامات التصنيف (عرض الكل)

odoo accounting v14 pos v15

حول هذا المنتدى

المساعدة

Autocomplete input on frontend

autocomplete frontend

1 الرد

5673 أدوات العرض

Francesco Ballerini

I have a select with thousands of elements to show on frontend page but it loads very slowly so I want to use autocomplete input.

I got a simple script here as example: https://jqueryui.com/autocomplete/ and it works on my frontend page but when I switch the example list with my list of elements it raise the following error:

TypeError: this.source is not a function

http://127.0.0.1:8069/web/static/lib/jquery.ui/jquery-ui.js:7602
Traceback:
_search@http://127.0.0.1:8069/web/static/lib/jquery.ui/jquery-ui.js:7602:8
$.widget/search@http://127.0.0.1:8069/web/static/lib/jquery.ui/jquery-ui.js:7594:15
$.widget/_searchTimeout/this.searchinghandlerProxy@http://127.0.0.1:8069/web/static/lib/jquery.ui/jquery-ui.js:641:6

I adapted my code to the res.country table data so it should be easy to test for anyone if you can help me with this. Log error doesn't say much to me because I don't know js framework, but when i t-out 'country_list' I can see list of strings. On _searchTimeout property I can read

// search timeout should be triggered before the input value is changed
So I guess it has something to do with promise resolve, async function.. all things I don't know very well : )

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="my_details_snippet" inherit_id="portal.portal_my_details" name="Details Snippet">
        <xpath expr="//form" position="after">
            <script src="/web/static/lib/jquery.ui/jquery-ui.js" type="text/javascript"/>
            <script type="text/javascript">
                $( function() {
                var availableCountries = $( "select_country_list_by_class" );
                $( "#tags" ).autocomplete({
                source: availableCountries
                });
                } );
            </script>
        </xpath>
        <xpath expr="//form//select[@name='country_id']//parent::div" position="after">
            <t t-set="country_list" t-value="[str(country_id.name) for country_id in countries]" class="select_country_list_by_class" />
            <t t-esc="country_list"/>
            <div class="ui-widget">
                <label for="tags">Tags:</label>
                <input id="tags"/>
            </div>
        </xpath>
    </template>
</odoo>

Francesco Ballerini

الكاتب أفضل إجابة

I managed to make it work for my specific use case, since I provided a little example on 'country_id' I will also provide the snippet with the solution. I've adapted some things to make it works on Odoo 14

I had some trouble to make the autocomplete() solution working with countries because it will fail with 'unexpected token' if you don't trim the " ' " from some countries, that's why I used replace() in this snippet.

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="portal_details_autocomplete_snippet" inherit_id="portal.portal_my_details" name="User Profile">
        <xpath expr="//form" position="inside">
            <script src="/web/static/lib/jquery/jquery.js" type="text/javascript"/>
            <script type="text/javascript">
                <!-- Send readonly field to backend if any -->
                $('Form').on('submit', function() {
                $('select').prop('disabled', false);
                });
            </script>
            <script src="/web/static/lib/jquery.ui/jquery-ui.js" type="text/javascript"/>
            <script type="text/javascript">
                $(document).ready(function() {
                var availableCountries =<t t-esc="[country_id.name.replace('\'', '') for country_id in countries]"/>;
                console.log(availableCountries)
                $('.country_autocomplete').autocomplete({
                source: availableCountries
                });
                });
            </script>
        </xpath>
        <xpath expr="//form//select[@name='country_id']//parent::div" position="after">
            <div t-attf-class="form-group #{error.get('country_id') and 'o_has_error' or ''} col-xl-6">
                <label class="col-form-label" for="country_id">Country ID (Test)</label>
                <input type="text" name="country_id"
                       t-attf-class="form-control #{error.get('country_id') and 'is-invalid' or ''} country_autocomplete"
                       t-att-value="country_id or partner.country_id"/>
            </div>
        </xpath>
    </template>
</odoo>

هل أعجبك النقاش؟ لا تكن مستمعاً فقط. شاركنا!

أنشئ حساباً اليوم لتستمتع بالخصائص الحصرية، وتفاعل مع مجتمعنا الرائع!

تسجيل

المنشورات ذات الصلة	الردود	أدوات العرض
Front-end Odoo language frontend	1 أغسطس 22	8018
Sensitive form field has not disabled autocomplete autocomplete	4 نوفمبر 20	7023
What is we-button, we-collapse like things? frontend	0 يوليو 20	4218
URL url frontend	0 نوفمبر 23	2373
custom layout in form views layout frontend	1 يوليو 23	4634

لقد تم الإبلاغ عن هذا السؤال

هل أعجبك النقاش؟ لا تكن مستمعاً فقط. شاركنا!