EasyUI Forum
July 17, 2018, 08:16:32 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: JQuery UI autocomplete and EasyUI not compatible  (Read 273 times)
fguibert
Newbie
*
Posts: 5


View Profile
« on: May 18, 2018, 02:30:54 AM »

Hi

I'm trying to integrate the JQueryUI autocomplete plugin in my EasyUI application (to create a street/postalcode/city widget), but I get a error on my EasyUI accordion menu :

Code:
jquery.min.js:2 Uncaught Error: no such method 'select' for accordion widget instance

I'm using EasyUI 1.5.5 and JQueryUI 1.12.1

my page looks like this :

first, call EasyUI lib's :
Code:
    <link rel="stylesheet" id="stylesheetJeasyui" type="text/css" href="/InSquare/resources/css/default/easyui.css">
    <script type="text/javascript" src="/InSquare/resources/js/jquery.min.js"></script>
    <script type="text/javascript" src="/InSquare/resources/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/InSquare/resources/js/locale/easyui-lang-fr.js"></script>

then create the menu :

Code:
<body>
...
<div class="easyui-accordion" id="acc" data-options="fit:false,border:false,animate:false">
<div title="First" style="padding:10px;">
Content 1
</div>
<div title="Second" style="padding:10px;">
Content 2
</div>
</div>
...

and select the second menu item :

Code:
<script>
                           $(function(){
                               $('#acc').accordion('select','Second');   
                           });
</script>

and finally, create the autocomplete textbox with JUI : I follow others recomandations on the forum to include the script inside body, but the error above is always raised :

Code:
<script  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="  crossorigin="anonymous"></script>
 
<input name="cp" id="cp" type="text" placeholder="CP">
<script>
              $(function(){
                 
               $("#cp").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: "https://api-adresse.data.gouv.fr/search/?postcode="+$("input[name='cp']").val(),
                            data: { q: request.term },
                            dataType: "json",
                            success: function (data) {
                                var postcodes = [];
                                response($.map(data.features, function (item) {
                                    // Ici on est obligé d'ajouter les CP dans un array pour ne pas avoir plusieurs fois le même
                                    if ($.inArray(item.properties.postcode, postcodes) == -1) {
                                        postcodes.push(item.properties.postcode);
                                        return { label: item.properties.postcode + " - " + item.properties.city,
                                                 city: item.properties.city,
                                                 value: item.properties.postcode
                                        };
                                    }
                                }));
                            }
                        });
                    }
                });

 });
</script>

Any help greatly appreciated !!

   
Logged
jarry
Administrator
Hero Member
*****
Posts: 1406


View Profile Email
« Reply #1 on: May 18, 2018, 05:07:42 AM »

Please try this code:
Code:
<input name="cp" id="cp" type="text" placeholder="CP">
<input id="cc">
<script type="text/javascript">
  $(function(){
    $('#cc').combobox({
      mode: 'remote',
      valueField: 'value',
      textField: 'label',
      loader: function(param, succ){
        if (!param.q){return;}
        $.ajax({
          url: "https://api-adresse.data.gouv.fr/search/?postcode="+$("input[name='cp']").val(),
          data: {q:param.q},
          dataType: 'json',
          success: function(data){
            var rows = $.map(data.features, function(item){
              return {
                label: item.properties.postcode + " - " + item.properties.city,
                city: item.properties.city,
                value: item.properties.postcode
              };
            });
            succ(rows)
          }
        })
      }
    })
  })
</script>
Logged
fguibert
Newbie
*
Posts: 5


View Profile
« Reply #2 on: June 07, 2018, 03:02:40 AM »

thanks a lot jarry I've not been notified of your answer, but it's exactly what I finally do
so, no way to use this Jquery autocomplete component in our JeasyUi app
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!