【发布时间】:2020-05-27 17:30:20
【问题描述】:
我创建了一个自动化程序,它允许我在网站上输入详细信息(尽管我无法共享它,因为它是内部的)。我下面的代码仅在输入“接收自”文本之前有效。但是,这个“接收自”字段有一个自动完成列表,我需要选择它才能填充其他字段,例如 TIN 和地址。
自动完成列表与 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&#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&#39;ve reached the maximum length allowed.">
<INPUT class="right button-style" id=add-receipt type=button value=Add jQuery17109198838813964318="43"> </DIV>
</FORM>
</DIV>
Chrome 控制台:
检查自动完成列表的元素:
<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>
【问题讨论】:
-
嗨,我希望这不是一个愚蠢的建议,但你能找到你正在寻找的选项的索引吗(输入 inputString 后自己数一下,因为这个字段似乎没有自己有索引)然后在 supName 元素上使用
.selectedIndex = x? -
嗨,我已经检查过了,但是,我试图控制的字段不是下拉列表。相反,它是一个通过 jquery 显示项目的字段。
-
你从哪里得到那个 HTML 源代码?如果它来自“查看源代码”,它可能不会反映最终的 HTML - 您需要使用开发人员工具中的“检查元素”
-
嗨@TimWilliams,我从inspect 元素获得了HTML 源代码。首先,我触发了该字段(输入了几个字母)并等待自动完成列表出现。一旦出现,我就通过开发人员检查员检查了该元素。我得到了上面的 HTML。
-
您尝试查询时没有弹出菜单。下面看看我的回答
标签: html excel vba web-scraping autocomplete