VBAでオートコンプリートリストの項目をクリックして、HTML

その他 2022-04-21 00:29:06 訪問数: 0
Sevpoint：

私は（それが内部であるように私はそれを共有することはできませんが）それは私がウェブサイト上で詳細を入力することができます自動化を作成しました。それは「から受信した」上のテキストを入力するまで、私のコードは以下のみ働いています。しかし、フィールド「から受信した」これはオートコンプリートリストを持っており、私はそのようなTINや住所などの他のフィールドを埋めるために、それを選択する必要があります。

オートコンプリートリストは、中1と非常に似ている https://jqueryui.com/autocomplete/ またはhttp://demos.codexworld.com/autocomplete-textbox-using-jquery-php-mysql/

以下は、私のコードは次のようになります。 

Sub Automate_IE_Enter_Data()
'This will load a webpage in IE
Dim i               As Long
Dim Url             As String
Dim IE              As InternetExplorer
Dim objElement      As Object
Dim objCollection   As Object
Dim HWNDSrc         As Long
Dim wsTemplate      As Worksheet
Dim objEvent        As Object
Dim li_arr          As Variant
Dim NodeList        As Object
Dim x               As Long


Set wsTemplate = ThisWorkbook.Sheets("Template")

'Create InternetExplorer Object
Set IE = New InternetExplorerMedium

'Set IE.Visible = True to make IE visible, or False for IE to run in the background
IE.Visible = True

'Define URL by getting the value in rngURL; can be found in the main sheet
Url = "http://URL Path"

'Navigate to URL
IE.Navigate Url

' Statusbar let's user know website is loading
Application.StatusBar = Url & " is loading. Please wait..."

Do
DoEvents
Loop Until IE.ReadyState = READYSTATE_COMPLETE

'Webpage Loaded
Application.StatusBar = Url & " Loaded"

'Get Window ID for IE so we can set it as activate window
HWNDSrc = IE.hwnd
'Set IE as Active Window
SetForegroundWindow HWNDSrc
ShowWindow IE.hwnd, SW_SHOWMAXIMIZED

Dim Doc As HTMLDocument
Set Doc = IE.document

inputString = "Nuevo"

With Doc.getElementById("supName")

    .Focus
    SendKeys inputString 'Trigger the field to show autocomplete list

End With

'----THIS IS WHERE I AM TRYING TO CLICK THE AUTOCOMPLETE LIST THAT IS BEING DISPLAYED-----
'-----HOWEVER, CLICKING DOESN'T SEEM TO WORK.-----

Set NodeList = Doc.querySelectorAll(".ui-active-menuitem[role=""menuitem""]")

For x = 0 To NodeList.Length - 1
'Debug.Print NodeList.Item(x).Click '<==this way
NodeList.Item(x).Focus
NodeList(x).Click   '<==Or this method

Next x


MsgBox "Done"

'Unload IE
endmacro:
Set IE = Nothing
Set objElement = Nothing
Set objCollection = Nothing

End Sub

以下は、私は私の問題を理解するために参考になると思いますHTMLは次のようになります。 

'----- NAME OF THE FIELD THAT HAS AN AUTOCOMPLETE LIST----
<INPUT name=supName class="required-placeholder simple-placeholder ui-autocomplete-input placeholding" id=supName role=textbox aria-haspopup=true aria-autocomplete=list type=text value=Required jQuery17102032699680461189="39" placeholder="Required" autocomplete="off">

<UL class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role=listbox aria-activedescendant=ui-active-menuitem style="WIDTH: 400px; LEFT: 751px; Z-INDEX: 1; DISPLAY: none; TOP: 287px" jQuery17102032699680461189="42"><LI class=ui-menu-item role=menuitem jQuery17102032699680461189="104"><A tabIndex=-1 class=ui-corner-all jQuery17102032699680461189="114">List 0</A></LI>

<LI class=ui-menu-item role=menuitem jQuery17102032699680461189="105"><A tabIndex=-1 class=ui-corner-all jQuery17102032699680461189="115">List 1</A></LI>
<LI class=ui-menu-item role=menuitem jQuery17102032699680461189="106"><A tabIndex=-1 class=ui-corner-all jQuery17102032699680461189="116">List 2</A></LI>
<LI class=ui-menu-item role=menuitem jQuery17102032699680461189="107"><A tabIndex=-1 class=ui-corner-all jQuery17102032699680461189="117">List 3</A></LI>
<LI class=ui-menu-item role=menuitem jQuery17102032699680461189="108"><A tabIndex=-1 class=ui-corner-all jQuery17102032699680461189="118">List 4</A></LI>
<LI class=ui-menu-item role=menuitem jQuery17102032699680461189="109"><A tabIndex=-1 class=ui-corner-all jQuery17102032699680461189="119">List 5</A></LI>
<LI class=ui-menu-item role=menuitem jQuery17102032699680461189="110"><A tabIndex=-1 class=ui-corner-all jQuery17102032699680461189="120">List 6</A></LI>
<LI class=ui-menu-item role=menuitem jQuery17102032699680461189="111"><A tabIndex=-1 class=ui-corner-all jQuery17102032699680461189="121">List 7</A></LI>
<LI class=ui-menu-item role=menuitem jQuery17102032699680461189="112"><A tabIndex=-1 class=ui-corner-all jQuery17102032699680461189="122">List 8</A></LI>
<LI class=ui-menu-item role=menuitem jQuery17102032699680461189="113"><A tabIndex=-1 class=ui-corner-all jQuery17102032699680461189="123">List 9</A></LI></UL>

オートコンプリートリストのサンプルのスクリーンショット：

ここでは、画像の説明を入力します。

HTMLの多く：

<DIV class="ui-tabs-panel ui-widget-content ui-corner-bottom" id=ui-tabs-1 jQuery17109198838813964318="12">

  <FORM id=receiptEntryForm action=/ReceiptEntry/SaveReceipt method=post jQuery17109198838813964318="40">

    <DIV id=receipt-entry>
      <DIV class=receipt-content>
        <DIV class=content-label>
          <LABEL>OR No:</LABEL>
          <LABEL>Date:</LABEL>
          <LABEL>Received From:</LABEL>
          <LABEL>TIN:</LABEL>
          <LABEL>Address:</LABEL> </DIV>
        <DIV class=content-input>
          <INPUT name=ReceiptNumber disabled id=ReceiptNumber type=text data-val-required="The ReceiptNumber field is required." data-val-number="The field ReceiptNumber must be a number." data-val="true">

          <INPUT name=printDate class="datepicker hasDatepicker" id=printDate type=text jQuery17109198838813964318="38">

          <INPUT name=supName class="required-placeholder simple-placeholder ui-autocomplete-input placeholding" id=supName role=textbox aria-haspopup=true aria-autocomplete=list type=text value=Required jQuery17109198838813964318="39" placeholder="Required" autocomplete="off">

          <INPUT name=SupplierCode id=SupplierCode type=hidden data-val-required="The SupplierCode field is required." data-val="true" data-val-length-max="20" data-val-length="You&amp;#39;ve reached the maximum length allowed.">

          <INPUT name=SupTIN class="required-placeholder placeholding simple-placeholder" id=SupTIN type=text value=Required jQuery17109198838813964318="41" placeholder="Required" ,>

          <TEXTAREA name=SupAdd class="textarea-wide required-placeholder" id=SupAdd rows=3 cols=48 placeholder="Required"></TEXTAREA>
        </DIV>
      </DIV>
      <DIV class=editor-label>
        <LABEL id=sum-label>The sum of ****:</LABEL>
        <LABEL class=grayed-out id=total-amount-words></LABEL>
        <LABEL class=right id=total-amount></LABEL>
      </DIV>
      <BR>
      <BR>
      <BR>
      <DIV id=receipt-selection>
        <DIV class=content-label>
          <LABEL id=receipt-type-label>Receipt Type:</LABEL>
          <LABEL for=chk-vatable>VATable Receipt:</LABEL>
          <H5>IN PAYMENT OF</H5>
          <BR>
        </DIV>
        <DIV class=content-iput>
          <SELECT id=receiptentry-type jQuery17109198838813964318="36">
            <OPTION value=cr selected>Collection Receipt</OPTION>
            <OPTION value=or>Official Receipt</OPTION>
          </SELECT>
          <BR>
          <INPUT disabled id=chk-vatable type=checkbox jQuery17109198838813964318="37"> </DIV>
        <DIV id=receiptentry-receipt-table>
          <DIV>
            <TABLE>
              <THEAD>
                <TR>
                  <TH>INVOICE NO.</TH>
                  <TH>AMOUNT</TH>
                  <TH colSpan=3>FORM OF PAYMENT</TH>
                  <TH>AMOUNT</TH>
                </TR>
              </THEAD>
              <TBODY id=receipt-entry-table1>
                <TR>
                  <TD>
                    <SPAN class="table1-invoice left-align" id=invoice0 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-amount1 right-align" id=invamount0 contentEditable=true jQuery17109198838813964318="44"></SPAN>
                  </TD>
                  <TD class="bold left-align" colSpan=3>CASH</TD>
                  <TD>
                    <SPAN class="table1-amount2 right-align" id=table1-cash-amount contentEditable=true jQuery17109198838813964318="53"></SPAN>
                  </TD>
                </TR>
                <TR>
                  <TD>
                    <SPAN class="table1-invoice left-align" id=invoice1 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-amount1 right-align" id=invamount1 contentEditable=true jQuery17109198838813964318="45"></SPAN>
                  </TD>
                  <TH>BANK</TH>
                  <TH>CHECK NO.</TH>
                  <TH>DATE</TH>
                  <TD>
                    <SPAN class="table1-amount2 right-align" jQuery17109198838813964318="54"></SPAN>
                  </TD>
                </TR>
                <TR>
                  <TD>
                    <SPAN class="table1-invoice left-align" id=invoice2 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-amount1 right-align" id=invamount2 contentEditable=true jQuery17109198838813964318="46"></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-bank left-align" id=bankname0 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-check left-align" id=bankcheck0 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-date center-align" id=bankdate0 contentEditable=true name="date"></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-amount2 right-align" id=bankamount0 contentEditable=true jQuery17109198838813964318="55"></SPAN>
                  </TD>
                </TR>
                <TR>
                  <TD>
                    <SPAN class="table1-invoice left-align" id=invoice3 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-amount1 right-align" id=invamount3 contentEditable=true jQuery17109198838813964318="47"></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-bank left-align" id=bankname1 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-check left-align" id=bankcheck1 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-date center-align" id=bankdate1 contentEditable=true name="date"></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-amount2 right-align" id=bankamount1 contentEditable=true jQuery17109198838813964318="56"></SPAN>
                  </TD>
                </TR>
                <TR>
                  <TD>
                    <SPAN class="table1-invoice left-align" id=invoice4 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-amount1 right-align" id=invamount4 contentEditable=true jQuery17109198838813964318="48"></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-bank left-align" id=bankname2 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-check left-align" id=bankcheck2 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-date center-align" id=bankdate2 contentEditable=true name="date"></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-amount2 right-align" id=bankamount2 contentEditable=true jQuery17109198838813964318="57"></SPAN>
                  </TD>
                </TR>
                <TR>
                  <TD>
                    <SPAN class="table1-invoice left-align" id=invoice5 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-amount1 right-align" id=invamount5 contentEditable=true jQuery17109198838813964318="49"></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-bank left-align" id=bankname3 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-check left-align" id=bankcheck3 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-date center-align" id=bankdate3 contentEditable=true name="date"></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-amount2 right-align" id=bankamount3 contentEditable=true jQuery17109198838813964318="58"></SPAN>
                  </TD>
                </TR>
                <TR>
                  <TD>
                    <SPAN class="table1-invoice left-align" id=invoice6 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-amount1 right-align" id=invamount6 contentEditable=true jQuery17109198838813964318="50"></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-bank left-align" id=bankname4 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-check left-align" id=bankcheck4 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-date center-align" id=bankdate4 contentEditable=true name="date"></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-amount2 right-align" id=bankamount4 contentEditable=true jQuery17109198838813964318="59"></SPAN>
                  </TD>
                </TR>
                <TR>
                  <TD>
                    <SPAN class="table1-invoice left-align" id=invoice7 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-amount1 right-align" id=invamount7 contentEditable=true jQuery17109198838813964318="51"></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-bank left-align" id=bankname5 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-check left-align" id=bankcheck5 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-date center-align" id=bankdate5 contentEditable=true name="date"></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-amount2 right-align" id=bankamount5 contentEditable=true jQuery17109198838813964318="60"></SPAN>
                  </TD>
                </TR>
                <TR>
                  <TD>
                    <SPAN class="table1-invoice left-align" id=invoice8 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-amount1 right-align" id=invamount8 contentEditable=true jQuery17109198838813964318="52"></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-bank left-align" id=bankname6 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-check left-align" id=bankcheck6 contentEditable=true></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-date center-align" id=bankdate6 contentEditable=true name="date"></SPAN>
                  </TD>
                  <TD>
                    <SPAN class="table1-amount2 right-align" id=bankamount6 contentEditable=true jQuery17109198838813964318="61"></SPAN>
                  </TD>
                </TR>
                <TR>
                  <TD class=td-title>TOTAL</TD>
                  <TD>
                    <SPAN class=right-align id=table1-amount1-total contentEditable=true></SPAN>
                  </TD>
                  <TD colSpan=3></TD>
                  <TD>
                    <SPAN class=right-align id=table1-amount2-total contentEditable=true></SPAN>
                  </TD>
                </TR>
              </TBODY>
            </TABLE>
          </DIV>
        </DIV>
      </DIV>
      <BR>
      <LABEL>THIS CANCELS OUR P.R.#</LABEL>
      <INPUT name=CancelPrNo id=CancelPrNo type=text data-val="true" data-val-length-max="50" data-val-length="You&amp;#39;ve reached the maximum length allowed.">
      <INPUT class="right button-style" id=add-receipt type=button value=Add jQuery17109198838813964318="43"> </DIV>
  </FORM>
</DIV>

クロームコンソール：

ここでは、画像の説明を入力します。

自動補完リストの要素を点検： 

<UL class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role=listbox aria-activedescendant=ui-active-menuitem style="WIDTH: 400px; LEFT: 559px; Z-INDEX: 1; DISPLAY: block; TOP: 287px" jQuery17100985129077826366="42">
<LI class=ui-menu-item role=menuitem jQuery17100985129077826366="62" sizcache02782874225672333="1" sizset="0">
<A tabIndex=-1 class=ui-corner-all jQuery17100985129077826366="63">
*TEXT RESULT OF THE AUTOCOMPLETE LIST*
</A>
</LI></UL>
ライアンWildry：

良い質問！

Internet Explorerは、jQueryのカスタムコントロールで作業するときの方法で構築使用して自動化することは非常に難しいことができます。ありがたいことに、より容易な公正が少し生活をするために、jQueryの自体（ページにロードされたとき）は、これらのコントロールの既存の方法を使用するようにブラウザにJavaScriptを注入する方法である、または。

私は以下のやったが使用されている。このことでオートコンプリートコントロールを持っているテストのために立つ、とページを。

あなたはおそらくに変更を加える必要がありますCSSセレクタページ上の正しい要素を指すように、しかし、以下の使用方法は、プログラムに仕事したい要素を制御する必要があります。

コード

Option Explicit

#If Win64 Then
    Public Declare PtrSafe Sub Sleep Lib "kernel32" (ByVal dwMilliseconds As LongPtr)
#Else
    Public Declare Sub Sleep Lib "kernel32" (ByVal dwMilliseconds As Long)
#End If

Sub AutoCompleteExamples()
    Dim ie As Object: Set ie = CreateObject("InternetExplorer.Application")
    ie.Visible = True
    LoadPage ie, "https://jqueryui.com/resources/demos/autocomplete/default.html"

    'Trigger autocomplete with jQuery. This select the first ui-autocomplete-input, you may need -
    'to adjust this, if this isn't the first autocomplete control on page
    ie.document.parentWindow.execScript "$('.ui-autocomplete-input').first().val('A').autocomplete('search')"

    'Select first item with jQuery, the UL updates in response to the click event
    'Result should be it selected 'ActionScript'
    ie.document.parentWindow.execScript "$('ul.ui-menu').children().first().click()"

    'Alternatively if you want to pick an item from the drop down with a specific value
    'You can look inside the ul-menu-items that are created and use Contains. The contains method is case sensitive
    ie.document.parentWindow.execScript "$('ul.ui-menu').children().find('.ui-menu-item-wrapper:contains(""ActionScript"")').click()"
End Sub

Public Sub LoadPage(ByRef ie As Object, ByVal URL As String)
    With ie
        .Navigate URL
        Sleep 500 'Add a built in delay
        Do While .busy And .readystate <> 4: DoEvents: Loop
        Sleep 500 'Add a built in delay
    End With
End Sub

おすすめ

転載: http://43.154.161.224:23101/article/api/json?id=30191&siteId=1
おすすめ
ランキング
Oracleのクエリ重複フィールド
An error occurred when ssm used count to query data
【Leyes de la Naturaleza】La sabiduría de las multitudes
JavaWebの研究では、（13）を締結 - セッションの使用は、重複送信フォームを防ぎます
Firebase増加サインアップクォータ
[MyBatisフレームワーク]mybatis入門
ハートレスの世界
Djangoのインストールと使用について
[转] UiPath展開アーキテクチャ
mybatis-plusは楽観的なロック変更を使用します
アーカイブ
もっと
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)

コードワールド

© 2018 codetd.com